Question

我在修改此粘性导航代码以适应某些稍微不同的情况时遇到了麻烦。来源如下：Codepen link

这是我到目前为止所做的：jsfiddle link

我的与众不同之处在于，标题上方可能有（或可能不重要）顶部栏，但它不是粘性标题的一部分，因此除非您向上滚动到顶部，否则它将不可见。最佳。

我正在尝试修改jQuery以补偿以下问题： 1）当滚动回到顶部时，页眉必须将自身固定在警报栏下方（如果有）。 2）标头最初不能固定，它必须像静态标头一样正常滚动到屏幕之外。仅当用户从页面顶部以外的其他位置向下滚动时，它才应该向上滑出视图。 3）动画必须流畅，当用户滚动回到页面顶部时，不能有任何闪烁或跳跃。

数字3是我的代码有问题。如果您向上滚动至顶部，然后单击滚动条箭头而不是使用鼠标滚轮进行最后100px左右的操作，则可以看到它何时从固定位置返回到绝对位置，并且标题突然“跳”回位置。

我知道警报栏的高度（如果存在）需要考虑（要知道从顶部开始的初始滚动何时超过了警报栏和标题的高度），但是我尝试在任何地方添加它计算会使跳跃变得更糟或完全破坏效果。

编辑：另外，我确定其中的增量值不正确，我不确定如何处理。我以为增量应该是警报栏和标头的总和，但这没用。

<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 30;
var navbarHeight = $('header').outerHeight();

if($('alertBar').length) {
  var alertHeight = $('alertBar').outerHeight();
} else {
  var alertHeight = 0;
}

$(window).scroll(function(event){
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 50);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if(Math.abs(lastScrollTop - st) <= delta)
  return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down, hide nav
    $('header').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up, show nav
    if(st + $(window).height() < $(document).height()) {
      $('header').removeClass('nav-up').addClass('nav-down not-top');
      $('body').css({"padding-top": navbarHeight});
    }
    // if scrolled up to the top again
    if(st <= navbarHeight) {
      $('header').removeClass('not-top');
      $('body').css({"padding-top": "0px"})
    }


  }

  lastScrollTop = st;
}

</script>

基本上，当用户返回顶部并且标题返回到警报栏下方的位置时，我试图平滑过渡。有人有主意吗？

Answer 1

更新

https://jsfiddle.net/7mgt5eku/3/

您将需要向标题添加导航栏类，就像这样...

<header class = "nav-down navbar">

并将其添加到CSS

.nav-down.hidden { transition:all 0.2s; }

让我知道您的想法。

如果您认为有必要，可以使用变量和延迟来修饰它，但是我认为这将为您提供所需的内容...

    $(window).scroll(function(event){
  didScroll = true;
  if($(document).scrollTop() < 30 && $('#alertBar').length){
    $('.nav-down').css('top', "2.5rem");
  } else{
    $('.nav-down').css('top', $(document).scrollTop())
  }

});

对不起，错过了“警报消失后进行检查，“ && $（'＃alertBar'）。length”应该解决这一问题。

向上滚动粘性标头，但补偿初始绝对位置

1 个答案: