OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

jQuery page scroll not changing navbar href to active class

  • Thread starter Thread starter Brnovich
  • Start date Start date
B

Brnovich

Guest
I have a one-page website. When I scroll down I want my (fixed) navbar links to change the status to active when reaching the position of that specific div.

I used jQuery but it doesn't work. Here is my code:

Code:
// SMOOTH SCROLLING PAGES

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
    }, 800, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
  });
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('main-navigation ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
  });
};

Here is my HTML:

Code:
<nav id="main-navigation">
  <ul>
    <li class="active"><a href="#site-main">Home</a></li>
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
  </ul>
</nav>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>

The smooth scrolling works perfectly, but when I scrolling back up from div #d the navbar li active state doesn't change.

<p>I have a one-page website. When I scroll down I want my (fixed) navbar links to change the status to active when reaching the position of that specific div.</p>

<p>I used <code>jQuery</code> but it doesn't work. Here is my code:</p>

<pre><code>// SMOOTH SCROLLING PAGES

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");

$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');

var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('main-navigation ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
};
</code></pre>

<p>Here is my HTML:</p>

<pre><code><nav id="main-navigation">
<ul>
<li class="active"><a href="#site-main">Home</a></li>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
</ul>
</nav>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>
</code></pre>

<p>The smooth scrolling works perfectly, but when I scrolling back up from div <code>#d</code> the navbar li active state doesn't change.</p>
 

Latest posts

M
Replies
0
Views
1
MusicLovingIndianGirl
M
Q
Replies
0
Views
2
quora question
Q
Top