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/）。它在用户向下滚动后隐藏标题，如果用户向上滚动至少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与你的完全相同。

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

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

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

1 个答案: