jQuery页面滚动不变navbar href为活动类

Question

我有一个单页的网站。当我向下滚动时，我希望我的（固定）导航栏链接在达到特定div的位置时将状态更改为活动状态。我使用jQuery但它不起作用。这里是我的代码：

// 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"); 
    } 
    }); 
}; 

这里是我的HTML：

<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> 

平滑滚动完美地工作，但是当我从滚动DIV #d备份导航栏里活跃状态不会改变。

Answer 1

这里，我准备捣鼓你，我希望你在寻找什么 - http://jsfiddle.net/skyr9999/dpuvcj5w

<div class="content"> 
    <div id="site-main">DIV Home</div> 
    <div id="a">DIV Alpha</div> 
    <div id="b">DIV Bravo</div> 
    <div id="c">DIV Charlie</div> 
    <div id="d">DIV Delta</div> 
</div> 

<nav id="main-navigation"> 
    <ul> 
     <li><a class="menuitem" href="#site-main">Home</a></li> 
     <li><a class="menuitem" href="#a">A</a></li> 
     <li><a class="menuitem" href="#b">B</a></li> 
     <li><a class="menuitem" href="#c">C</a></li> 
     <li><a class="menuitem" href="#d">D</a></li> 
    </ul> 
</nav> 

JS

$(document).ready(function() { 

    $('a[href^="#site-main"]').addClass('active'); 

//smoothscroll 
    $('.menuitem').on('click', function (e) { 
     e.preventDefault(); 
     // $(document).off("scroll"); 
     var athis = this; 
     var target = this.hash, 
       menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top + 2 
     }, 800, 'swing', function() { 
      window.location.hash = target; 
      $('.menuitem').removeClass('active'); 
      $(athis).addClass('active'); 

     });  
    });  

    $(window).scroll(function (event) { 
     var scrollPos = $(document).scrollTop(); 
     if (scrollPos === 0) 
     { 
      $('a[href^="#site-main"]').addClass('active'); 
      return; 
     }  
     $('.menuitem').each(function() { 
      var currLink = $(this); 
      var refElement = $(currLink.attr("href")); 
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
       $('.menuitem').removeClass("active"); 
       currLink.addClass("active"); 
      } else { 
       currLink.removeClass("active"); 
      } 
     });  
    })  
}); 

因为你不包括任何CSS，我即兴一点，但它似乎工作得很好。

CSS

#a,#b,#c,#d,#site-main { height: 400px;} 
#main-navigation { 
    position: fixed; 
    top: 0px; 
    right:10px;   
} 

#main-navigation ul li { 
    display: inline; 
} 

.active { 
    background: #f00; 
} 

更新1 我更新代码以匹配拨弄现在更改菜单项选择，当你双击自动滚屏项

Answer 2

您可以通过与该列表项具有循环代替，并用#符号更正ID选择：

$('#main-navigation li').each(function() { //<---correct id selector 
    var currLink = $(this); 
    var refElement = $(currLink.find('a').attr("href")); //<---find the anchor here 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('#main-navigation ul li').removeClass("active"); //<---and here 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
}); 

Answer 3

你可以使用这个很酷的小插件来实现这个 https://github.com/davist11/jQuery-One-Page-Nav

这将增加当前类当你在一个特定的div或部分 希望这个帮助:)

Answer 4

替换

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

与

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

完整代码：

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

$('a').each(function() { 
    $(this).parent().removeClass('active'); 
}) 
$(this).parent().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; 
}); 

}）;

无需onScroll功能