Question

我试图隐藏div如果用户向下滚动＆amp;如果用户向上滚动，则显示它。

这是我的代码，

<div class="baseNav">
    # some data
</div>

$(document).ready(function() {
    var senseSpeed = 2,
        prevScroll = 0;
    $(window).scroll(function(e) {
        var o = $(this).scrollTop();
        var nav = $(".baseNav");
        o - senseSpeed > prevScroll ? nav.filter(":not(:animated)").slideUp() : o + senseSpeed < prevScroll ? nav.filter(":not(:animated)").slideDown() : $(window).scrollTop() && nav.filter(":not(:animated)").slideDown(), prevScroll = o
    })
});

当用户smoothly向下滚动时，它会隐藏div，同样当用户smoothly向上滚动时，它会显示它。

问题是，如果用户向下滚动然后突然向上滚动它并不显示div。因此，我认为当用户（或光标）距离顶部100px范围内时show the div（无论如何）更好。

我们怎么能这样做？

Answer 1

默认情况下通过css显示元素

$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 100){
            $('.elem').hide();
        }
        else{
            $('.elem').show();
        }
    });

Answer 2

你可以使用javascript和jQuery的内置fadeout和fadedin选项显示和隐藏div。

请尝试以下方法。

＆＃13;

$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('.fade').fadeOut();
     }
    else
     {
      $('.fade').fadeIn();
     }
 });

＆＃13;

body {
    height: 2000px;    
}
.fade {
    height: 300px;
    width: 300px;
    background-color: #d15757;
    color: #fff;
    padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
The below div will get faded out on scrolling. 
    <div class="fade">
        Scroll down i will become invisible
    </div>
</div>

＆＃13;

slideTown（）与slideDown（）不正常工作

2 个答案: