Question

我在页面滚动时移动了一个导航栏，这是jQuery：

 $(document).ready(function() {  
    var stickyNavTop = $('.nav').offset().top;  
    var stickyNav = function(){  
    var scrollTop = $(window).scrollTop();  
    if (scrollTop > stickyNavTop) {   
        $('.nav').addClass('sticky');
    } else {  
        $('.nav').removeClass('sticky');   
      }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
    });

和CSS

.sticky {  
        position: fixed;  
        width: 100%;  
        left: 0;  
        top: 0;  
        border-top: 0;  
    }

问题是当导航栏位置固定时，导航栏下的主要内容重新排列边距，因为它认为导航栏已被删除但我不想要这个，我希望我的盒子留下在他们的地方。我该怎么办？

这是jsfiddle：

https://jsfiddle.net/omidh/cvjt0eLL/6/

Answer 1

此解决方法保持您的标记不变，只需对jQuery和CSS进行最少的编辑，请参阅下面的演示和代码。

DEMO： https://jsfiddle.net/cvjt0eLL/10/

添加了CSS：

.push {
    margin-top: 50px; /*same height as navbar*/
}

更新了jQuery：

 $(document).ready(function () {
     var stickyNavTop = $('.nav').offset().top;
     var stickyNav = function () {
         var scrollTop = $(window).scrollTop();
         if (scrollTop > stickyNavTop) {
             $('.nav').addClass('sticky');
             $('.content').addClass('push'); // added
         } else {
             $('.nav').removeClass('sticky');
             $('.content').removeClass('push'); //added
         }
     };

     stickyNav();

     $(window).scroll(function () {
         stickyNav();
     });
 });

jQuery：粘性导航栏改变了边距

1 个答案: