Question

滚动到第一部分（关于系统治疗）后，我尝试向页面添加粘性导航。

但是，只要出现粘性导航，页面就会跳转。当您点击＆＃34; Systemic Psychotherapy＆＃34;这也会影响页面落地的位置。在导航栏中。它不是降落在该部分的顶部，而是覆盖标题和前几个句子。但是，只有当您单击页面顶部时才会发生这种情况。

我尝试过使用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');
  }

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

任何人都可以帮我解决我出错的地方吗？

谢谢！

Answer 1

当您创建元素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', '');
  }
});

出现粘性导航时页面跳转

1 个答案: