javascript - jQuery:粘性导航栏更改边距

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 进行最少的编辑，请参阅下面的演示和代码。

演示: 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();
     });
 });