Question

我是一个菜鸟，对于一个学校项目，我试图创建一个单页网站，顶部有一个静态导航菜单，总是停留在那里，我希望它在你点击它的链接时做一个动画滚动效果。有人在这里为我做了这件事并且工作得很完美。

然而，你注意到它显示.top - 98，这是因为我的导航是98px高，所以它不会切断它跳到的部分。

现在我正在进入媒体查询，我可能会在某些休息时间增加该导航的高度。所以我想知道，是否可以将其从98更改为某种[nav current height]变量？无论导航的高度是什么，它都能正常工作？

提前致谢!!

$(document).ready(function() {
  $("nav a").on('click', function() {
    var link = $(this).attr('href');
    $('html,body').animate({
      scrollTop: ($(link).offset().top - 98)
    }, 'slow');
    return false;
  });
});

Answer 1

怎么样

$('html,body').animate({scrollTop: ($(link).offset().top - $('nav').height())},'slow');

Answer 2

是的，你可以那样做

scrollBarFunc = function(){
    var myNavHeight = $("#myselectorId").height();  //just put here your id or class 

    $("nav a").on('click',function(){
        var link = $(this).attr('href');
        $('html,body').animate({scrollTop: ($(link).offset().top - myNavHeight)},'slow');
        return false;
    });
}
$(document).ready(function(){ 
    scrollBarFunc();
});
$(window).resize(function(){
    scrollBarFunc();  //recall function to work when you resize 
});

修改此滚动导航菜单脚本？

2 个答案: