出现粘性导航时页面跳转答案

【问题标题】：Page jumps when sticky navigation appears出现粘性导航时页面跳转
【发布时间】：2017-03-08 00:38:16
【问题描述】：

我正在尝试在您滚动到第一部分（关于全身治疗）后向页面添加粘性导航。

但是，一旦出现粘性导航，页面就会跳转。当您单击导航栏中的“全身心理治疗”时，这也会影响页面的位置。它没有落在该部分的顶部，而是涵盖了标题和前几句话。但是，只有在您单击页面顶部时才会发生这种情况。

我尝试过使用 Waypoints：

$('.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');
  }

导航栏变粘时会缩小。我读过这会导致页面跳转，所以我尝试保持它相同的大小，但它仍然会跳转。

谁能帮我找出哪里出错了？

谢谢！

【问题讨论】：

标签： jquery css jquery-waypoints

【解决方案1】：

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

非粘性导航是105px，所以当它变得粘性时，导航后的所有元素都会向上移动105px以占据该空间。考虑将与padding-top 相同的105px 应用于<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', '');
  }
});

【讨论】：

解决了！谢谢！我什至没有考虑从页面流中删除导航栏。现在很有意义。
很高兴能帮上忙。如果您认为此答案充分解决了您的问题，请考虑accepting it as the answer.
完成！抱歉，我还是 Stack Overflow 的新手！