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
Show/Hide Div on Scroll
提问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
回答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");