jquery - 在其他 div 上滚动时更改引导导航类

Question

我正在尝试为我的 fcc 元素制作一个小作品集。 当目标 div 处于焦点时，我希望我的导航链接更改那里的事件类。 我在这段代码中使用 Bootstrap Here is my codepen link .请帮忙

<div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right link">
        <li><a href="#about" class="links">About</a></li>
        <li><a href="#" class="links">Works</a></li>
        <li><a href="#" class="links">Contacts</a></li>
      </ul>
    </div><!--/.nav-collapse -->

还有我的 Jquery

$(document).ready(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html, body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
}
});/* end of clickto scroll function */



var scroll_start = 0;
var startchange = $('#button-down');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() { 
  scroll_start = $(this).scrollTop();
  if(scroll_start > offset.top) {
      $(".navbar").css('background-color', '#333');

   } else {
      $('.navbar').css('background-color', 'transparent');
   }
  });
 }
});

Answer 1

搜索 bootstrap 文档，它有一个完全适合您需要的插件:affix