Question

我的网站有一个菜单栏，我希望它在用户向下滚动时隐藏，而在用户向上滚动时显示。

我尝试使用scrollTop函数，并且找到了添加scrollBottom函数的代码。不幸的是，它不起作用。

$(document).ready(function() {

    $.fn.scrollBottom = function(scroll) {
        if (typeof scroll === 'number') {
            window.scrollTo(0, $(document).height() - $(window).height() - scroll);
            return $(document).height() - $(window).height() - scroll;
        } else {
            return $(document).height() - $(window).height() - $(window).scrollTop();
        }
    }
    $(document).scrollTop(function() {
        $('header').fadeIn(200);
    });
    $(document).scrollBottom(function() {
        $('header').fadeOut(200);
    });

});

我想要这样的条状效果：

Answer 1

.scrollTop不能以这种方式使用。相反，它是一个element属性，它返回元素到顶部的距离。

MDN：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

我认为您想要的是为滚动添加一个事件侦听器（在jQuery .on()中），然后有条件地在侦听器回调中触发您想要的功能。假设您的滚动检测功能正确返回true / false：

function scrolledFunc() {
  // returns true if page is scrolled
}

$(document).on('scroll', function() {
  if (scrolledFunc) {
    $('header').fadeIn(200);
  }
});

Answer 2

我已经找到了解决方法。

$(document).ready(function(){ 
    var zero = 0;  
    $(document).on('scroll', function(){
        $('header').toggleClass('hide', $(window).scrollTop() > zero);
        zero = $(window).scrollTop();
    });
});

Answer 3

views.ArticleListCreateGet.as_view()

document.getElementById("return-to-top").style.display = "none";

$(window).scroll(function(){
  if($(this).scrollTop() >= 10)
    {
      document.getElementById("return-to-top").style.display = "";
    }
    else 
    {
      document.getElementById("return-to-top").style.display = "none";
    }
});

这是另一个示例，希望对您有所帮助。

Answer 4

这是另一个示例，演示如何检测用户滚动方向是向下还是向上，并显示/隐藏适当的菜单栏。

var lastpos=0, lastScrollDir='up';
$(window).scroll(function(){
  let curpos = $(window).scrollTop();
  let scrollDir = (curpos > lastpos) ? 'down' : 'up';
  if (scrollDir !== lastScrollDir && scrollDir == 'down'){
     lastScrollDir = scrollDir;
     $('#mnu').animate({
        height: '0px'
     },700);
  }else if (scrollDir !== lastScrollDir && scrollDir == 'up') {
     lastScrollDir = scrollDir;
     $('#mnu').animate({
        height: '40px'
     },700);
  }
  
  $('#msg').html(scrollDir + ' / ' + curpos);
  lastpos = curpos;
});

#mnu{position:fixed;top:0;left:0;width:100vw;height:40px;background:black;color:white;}
#content{width:100vw;min-height:200vh;}
  .flex-parent{display:flex;justify-content:center;align-items:center;flex-direction:column;}
  .flex-child{flex:1;}
  .flex-child:nth-child(1){margin-top:80px;}
  
#msg{position:fixed;top:0;right:0;padding:10px;text-align:center;background:wheat;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="mnu">Menu Bar</div>
<div id="content" class="flex-parent">
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
</div>
<div id="msg"></div>

如何通过滚动（上/下）获得显示/隐藏效果

4 个答案: