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

Answer 2

您正在设计的是一个单页组合，因此当用户点击“我的项目”时，她将滚动到“我的项目”部分。

从bootstrap尝试Scrollspy。向scrollspy添加自定义类将有所帮助。

如果您赶时间，请使用this template，然后根据需要进行样式化。

滚动其他div

2 个答案: