javascript - 使用固定导航发布 scrollto

Question

我使用 scrollto 和 scrollspy 建立了一个单页网站。一旦导航栏固定在顶部，该页面就可以很好地工作。但是，如果您在导航栏固定到顶部之前单击任何链接，所有链接都会关闭。而且他们离开的高度没有一致性。我玩过偏移量，每个部分都有 100px 的填充以解决间距问题。

这是开发站点的链接... http://23.23.170.24/aspire/

这是js...

$(文档).ready(函数(){

$(window).scroll(function(){

    var window_top = $(window).scrollTop() +1; // the "12" should equal the margin-top value for nav.stick
    var div_top = $('#checkdiv').offset().top;
        if (window_top > div_top) {
           $('nav.navbar').addClass('navbar-fixed-top');
            $('section').addClass('scrolled');
        } else {
             $('nav.navbar').removeClass('navbar-fixed-top');
              $('section').removeClass('scrolled');
        }
});


$(".click").click(function(evn){
      evn.preventDefault();
     $('html,body').stop(true).scrollTo((this.hash, this.hash),1000, {axis: 'y', offset   :0});
      return false;
});

$('body').scrollspy({ target: '#navbar' })

});

Answer 1

当 header 卡住时，Bootstrap scrollspy 和scrollto 会自动考虑 header 的高度。当不卡住时，您只需减去页眉的高度，您就会滚动到页面上的正确位置。