javascript - 调整此CSS header 自动隐藏？

我有一个标题，当用户向下滚动时会自动隐藏：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像素高的图像，用户有时可能只想向上滚动一点以查看图像的顶部。

最佳答案

这是[JSFiddle]（https://jsfiddle.net/okahara/jqq9zqez/1/）。当用户向下滚动时，它将隐藏标题，如果用户向上滚动至少350px或位于页面顶部，则将标题重新抬起。

我不确定您到底打算如何使用此代码，但是向上移动350px然后再次显示标题的想法有些瑕疵。提供的JSFiddle显示了几幅高度为350px的图像，如果我从最底部向上滚动，则标题将出现并覆盖一些图像。 （只是我的想法）

的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与您的CSS完全相同。

*请注意，演示工作的唯一方法是减小演示窗口的大小，以便您可以向下滚动超过350px。

让我知道是否不合适，我可以对其进行调整。