向上滚动时粘滞的标题，但补偿初始绝对定位

Question

我无法修改这个粘性导航代码以适应一些稍微不同的情况。这是来源：Codepen link

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

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

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

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

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

编辑：另外，我确定那里的delta值不正确，我不确定该如何处理。我认为三角洲应该是警报栏的高度和标题的组合，但这不起作用。

<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

UPDATE

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

你需要将navbar类添加到标题中，就像这样......

<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'）。长度“应该照顾的。