当粘滞导航出现时，页面跳转

我试图在滚动到第一部分（关于系统治疗）后向页面添加粘滞导航。当粘滞导航出现时，页面跳转

然而，一旦出现黏导航，页面跳转。当您点击导航栏中的“系统心理治疗”时，这也会影响页面的位置。它不是登陆该部分的顶部，而是覆盖标题和前几句话。但是，只有在您点击页面顶部时才会发生这种情况。

我使用航点尝试：

$('.js--section-about-st').waypoint(function(direction) { 
    if (direction == "down") { 
     $('nav').addClass('sticky'); 
    } else { 
     $('nav').removeClass('sticky'); 
    } 
});

和jQuery：当它变得粘稠

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    }

导航栏的大小减少。我读过这可能会导致页面跳跃，所以我试图保持它相同的大小，但它仍然跳跃。

任何人都可以请帮我找出我要出错的地方吗？

谢谢！

来源

2017-03-07 Brittany Ell

当您制作一个元素position: fixed;时，它将从页面流中移除，这意味着它不会影响其他元素。它曾经占据的任何高度都是无效的。 Here is an example of this behavior.

非粘性导航是105px，所以当它变得粘稠，您的导航之后的所有元素将向上移动105px占据这个空间。考虑将同样的105px作为padding-top应用于<body>以弥补现在缺失的导航栏。 Here is the same example from above, but with the fix now in place.

$(window).scroll(function() { 
    if ($(this).scrollTop() > 400){ 
    $('nav').addClass('sticky'); 
    $('body').css('padding-top', '105px'); //Height of non-stick nav 
    } 
    else{ 
    $('nav').removeClass('sticky'); 
    $('body').css('padding-top', ''); 
    } 
});

来源

2017-03-07 16:26:56 Santi

这是固定的！谢谢！我甚至没有想到将导航栏从页面流中移除。现在完美。 –

很高兴有帮助。如果你相信这个答案能够充分解决你的问题，请考虑[接受它作为答案。]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） – Santi

完成！对不起，我对Stack Overflow仍然很陌生！ –

当粘滞导航出现时，页面跳转

回答

相关问题