jQuery 滚动显示/隐藏 Div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13250325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:26:04  来源:igfitidea点击:

Show/Hide Div on Scroll

jqueryscrollshow-hide

提问by Dan

I have a div that sits at the bottom of a slideshow that I want to disappear when the user scrolls or uses down arrow then reappears when scrolls back to the top. I am guessing this is incorporating the jquery scroll functionality?

我有一个位于幻灯片底部的 div,我想在用户滚动或使用向下箭头时消失,然后在滚动回顶部时重新出现。我猜这是结合了 jquery 滚动功能?

回答by Priyank Patel

<div>
  <div class="a">
    A
  </div>
</div>?


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

Sample

样本

回答by Arun Killu

$(window).scroll(function () {
  var Bottom = $(window).height() + $(window).scrollTop() >= $(document).height();
if(Bottom )
{
$('#div').hide();
}
});

回答by Madhavi Mangapati

Try this code

试试这个代码

$('window').scrollDown(function(){$(#div).hide()});

$('window').scrollUp(function(){ $(#div).show() });

回答by DragonKnight

Here is my answer when you want to animate it and start fading it out after couple of seconds. I used opacity because first of all i didn't want to fade it out completely, second, it does not go back and force after many scrolls.

当您想为其设置动画并在几秒钟后开始淡出时,这是我的答案。我使用了不透明度,因为首先我不想让它完全淡出,其次,它在多次滚动后不会回退和强制。

$(window).scroll(function () {
    var elem = $('div');
    setTimeout(function() {
        elem.css({"opacity":"0.2","transition":"2s"});
    },4000);            
    elem.css({"opacity":"1","transition":"1s"});    
});

回答by Quatban Taco

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

$(window).scroll(function(){
    $('.main').fadeOut();
});

$(window).scrollEnd(function(){
    $('.main').fadeIn();
}, 700);

That should do the Trick!

这应该够了吧!

回答by Quatban Taco

i have a pretty answer try this code ;)

我有一个很好的答案试试这个代码;)

<div id="DivID">
</div>

$("#DivID").scrollview({ direction: 'y' });
$("#DivID > .ui-scrollbar").addClass("ui-scrollbar-visible");