修改此滚动导航菜单脚本

Modifying this scrolling nav menu script?

本文关键字：菜单 脚本 导航 滚动 修改      更新时间：2023-09-26

我是一个菜鸟，对于一个学校项目，我试图创建一个单页网站，该网站的顶部有一个静态导航菜单，该菜单始终保留在那里，我希望它在您单击其链接时执行动画滚动效果。 这里有人为我做了这个，效果很好。

但是，您注意到它显示.top - 98，这是因为我的导航高度为98px，因此它不会切断它跳转到的部分。

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

提前感谢！！

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

怎么样 

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

是的，你可以这样做 

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 
});
相关文章：