Javascript 如何使用jQuery阻止内容跳转到固定导航后面

一旦我向下滚动导航变得固定，这是伟大的，但随后内容跳转后面。导航的高度将随着浏览器窗口在我正在构建的实际站点上变小而改变，因此我不能在内容上使用固定的高度边距将其向下推。由于所需的边距会因浏览器窗口大小的不同而有所不同。有没有办法用jQuery解决这个问题？ 这里有一个现场演示，谢谢

html:

jQuery：

$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});

jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;

jQuery(window).scroll(function(){
    var scrollPos = jQuery(window).scrollTop();

    if (scrollPos >= navOffset){
        jQuery("nav").addClass("fixed");
    } else{
        jQuery("nav").removeClass("fixed");
    }
});
});

---

如果您的意思是滚动条可以覆盖固定的元素，那么您最好选择使用flexbox进行布局

---

固定元素必须被滚动条覆盖

如果您的意思是滚动条可以覆盖固定元素，那么您最好选择使用flexbox进行布局

---

固定元素必须由滚动条覆盖

您需要考虑导航的高度，因为当

位置：固定时，它将从内容流中取出已设置

jQuery

这样做的目的是添加一个边距来抵消导航的高度，导航在内容不固定时向下推动内容。那应该对你有用

编辑

我已经更新了代码，因此它现在只使用jQuery，而在调整大小时，jQuery将重新计算
导航的高度，并调整
部分
元素的边距。
您需要考虑导航的高度，因为当
位置：固定时，它将从内容流中取出已设置

jQuery

这样做的目的是添加一个边距来抵消导航的高度，导航在内容不固定时向下推动内容。那应该对你有用

编辑

我已经更新了代码，因此它现在只使用jQuery，而在调整大小时，jQuery将重新计算
导航的高度，并调整
部分
元素的边距。
我在您的codepen演示上测试了以下代码：

jQuery(document).ready(function() {
    var navOffset = jQuery('nav').offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset){
            jQuery("nav").addClass("fixed");
          var navHeight = jQuery("nav").height();
          jQuery("section").css({"margin-top" : navHeight});
        } else{
            jQuery("nav").removeClass("fixed");
          jQuery("section").css({"margin-top" : 0});
        }
    });
});

它在你的演示中起作用。我希望它能解决这个问题。
我在您的codepen演示上测试了以下代码：

jQuery(document).ready(function() {
    var navOffset = jQuery('nav').offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset){
            jQuery("nav").addClass("fixed");
          var navHeight = jQuery("nav").height();
          jQuery("section").css({"margin-top" : navHeight});
        } else{
            jQuery("nav").removeClass("fixed");
          jQuery("section").css({"margin-top" : 0});
        }
    });
});

它在你的演示中起作用。我希望它能解决这个问题。
谢谢，但唯一的问题是，随着浏览器窗口变小，我的导航高度（在实际网站上，而不是演示版上）会发生变化。所以它不会总是60像素。好的，我已经更新了代码。忘记使用CSS吧，因为这是一个更好的方法。我真的很感谢你的帮助，但是当我向上滚动一秒钟，页边空白就消失了，它就不能正常工作了。我找到了一个解决办法，但它带来了其他问题。链接是不可见的，当下拉菜单打开时，它不会移动内容。如果你想看一看，但唯一的问题是，我的导航高度（在实际网站上，而不是演示）会随着浏览器窗口变小而改变。所以它不会总是60像素。好的，我已经更新了代码。忘记使用CSS吧，因为这是一个更好的方法。我真的很感谢你的帮助，但是当我向上滚动一秒钟，页边空白就消失了，它就不能正常工作了。我找到了一个解决办法，但它带来了其他问题。链接是不可见的，当下拉菜单打开时，它不会移动内容。如果你想看的话，请看一看
$(".burger-button").on("click", function(){
    $("nav ul").toggleClass("showing");
});

jQuery(document).ready(function() {
    var navOffset = jQuery('nav').offset().top;

    jQuery(window).scroll(function(){

        var scrollPos = jQuery(window).scrollTop();
        var navHeight = jQuery("nav").height();

        if (scrollPos >= navOffset){

            jQuery("nav").addClass("fixed");
            jQuery("section").css("margin-top", navHeight);

        } else {

            jQuery("nav").removeClass("fixed");
            jQuery("section").css("margin-top", "0");

        }

    });

    jQuery(window).resize(function(){

        var scrollPos = jQuery(window).scrollTop();
        var navHeight = jQuery("nav").height();

        if (scrollPos >= navOffset){

            jQuery("section").css("margin-top", navHeight);

        } else {

            jQuery("section").css("margin-top", "0");
        }

    });
});

jQuery(document).ready(function() {
    var navOffset = jQuery('nav').offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset){
            jQuery("nav").addClass("fixed");
          var navHeight = jQuery("nav").height();
          jQuery("section").css({"margin-top" : navHeight});
        } else{
            jQuery("nav").removeClass("fixed");
          jQuery("section").css({"margin-top" : 0});
        }
    });
});