javascript - 调整这个 CSS 标题自动隐藏？

Question

我有一个在用户向下滚动时自动隐藏的标题:https://jsfiddle.net/6hgfw87b/7/

任何人都可以编辑它，以便在向上滚动时，仅当用户向上滚动至少 350px* 时标题才会重新出现吗？

(function($) {
  $(function() {
    var scroll = $(document).scrollTop();
    var headerHeight = $('.page-header').outerHeight();
    $(window).scroll(function() {
      var scrolled = $(document).scrollTop();
      // +100 by Me
      if (scrolled + 100 > headerHeight) {
        $('.page-header').addClass('off-canvas');
      } else {
        $('.page-header').removeClass('off-canvas');
      }
      if (scrolled > scroll) {
        $('.page-header').removeClass('fixed');
      } else {
        $('.page-header').addClass('fixed');
      }
      scroll = $(document).scrollTop();
    });
  });
})(jQuery);

*我有 350 像素高的图片，用户有时可能只想向上滚动一点以查看图片的顶部。

Answer 1

这是一个 [JSFiddle] ( https://jsfiddle.net/okahara/jqq9zqez/1/ )。它会在用户向下滚动后隐藏页眉，如果用户向上滚动至少 350 像素或位于页面顶部，则会将页眉恢​​复原状。

我不确定您究竟打算如何使用此代码，但上升 350 像素然后再次显示标题的想法有点缺陷。提供的 JSFiddle 显示了几个 350 像素高的图像，如果我从最底部向上滚动，标题将出现并覆盖一些图像。 (只是我的想法)

HTML

<header class="outer page-header">
  Hi
  <br> This
  <br> is
  <br> the
  <br> header
  <br>
</header>
<section class="page-content page-content-margin">
  <img src="http://placehold.it/150x350" />
  <img src="http://placehold.it/150x350" />
  <img src="http://placehold.it/150x350" />
  <img src="http://placehold.it/150x350" />
</section>

JS

var lastScrollTop = 0;
var goUp          = false;
var goUpVal       = 0;
$(window).scroll(function(event){
   var st         = $(this).scrollTop();
   if (st > lastScrollTop){ // downscroll code
       goUp = false;
       if (st >= 100){
           $('.page-header').addClass('off-canvas');
       }
   } else { // upscroll code
       if (!goUp) {
           goUp    = true;
           goUpVal = st;
       }
       if (goUpVal - st >= 350 || st === 0) {
           $('.page-header').removeClass('off-canvas');
       }
  }   
  lastScrollTop = st;
});

CSS 与您的完全相同。

*请注意，让演示正常工作的唯一方法是将演示窗口缩小，这样您实际上可以向下滚动超过 350 像素。

如果不对请告诉我，我可以进行调整。