Question

因此，当用户向下滚动时，我使用以下脚本隐藏我的标题，并且当页面从顶部向下200px并向下滚动时，它仅更改CSS。

我只是尝试在用户向上滚动时应用类导航栏＆amp;从底部开始100，向下滚动，从顶部向下滚动200。应用从顶部200。我已经阻止在页面顶部隐藏标题，我还想阻止它在底部显示，直到向上滚动100px

HTML标头：

 <header> 
   <nav> 
   </nav> 
 </header

脚本：

<script>
(function($) {
  var ost = 0;
   $(window).scroll(function() {
    var cOst = $(this).scrollTop();

 if(cOst > 200 && cOst > ost) {
   $('nav').addClass('fixed').removeClass('navbar');
}
else {
   $('nav').addClass('navbar').removeClass('fixed');
}

ost = cOst;
});
})(jQuery);
</script>

CSS：

 .navbar {
  top: 0;
  z-index: 9999;  }

.fixed {
 top: -62px;}

nav {
margin:0;
padding:0px;
text-align:center;
background-color: #ffffff;
border-bottom: 2px solid #d5dbdb;
width: 100%;
height: 60px;
position: fixed;
z-index: 9999;
top:0;
left: 0;
opacity: 0.9;
transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;    }

非常感谢任何反馈，评论或帮助。

谢谢（Y）

Answer 1

基本上你要做的是保留total的另一个变量，这样你就可以计算用户滚动的距离，并在向下滚动时将其重置为0。因为脚本是如何编写的，如果通过向上滚动显示标题任何向下滚动会再次隐藏它，所以我做了第二个总变量并命名为upTotal＆amp; downTotal。您可以通过更改值(upTotal >= 100)＆amp;更改显示/隐藏标题所需的向上/向下滚动量。分别为(downTotal >= 200)。如果这不是您的想法，请告诉我。

(function ($) {
    var ost = 0,
        upTotal = 0,
        downTotal = 0;
    $(window).scroll(function () {
        var cOst = $(this).scrollTop();

        if (cOst > ost) {
            upTotal = 0;
            downTotal += (cOst - ost);
            if (downTotal >= 200) {
                $('nav').addClass('navbar').removeClass('fixed');
            }
        } else {
            downTotal = 0;
            upTotal += (ost - cOst);
            if (upTotal >= 100) {
                $('nav').addClass('fixed').removeClass('navbar');
            }
        }
        ost = cOst;
    });
})(jQuery);

这是一个非常粗糙但有效的jsFiddle DEMO。

用户按值向上滚动时重新出现的标题（100px）

1 个答案: