800px后在scrollDown上显示div
800px后在scrollDown上显示div
提问于 2013-04-04 05:20:35
我想要显示一个隐藏的div时，从页面顶部向下滚动800px。到目前为止，我已经有了这个例子，但我猜它需要修改才能实现我正在寻找的东西。
编辑：
当scrollUp和高度小于800px时，这个div应该隐藏
HTML：
<div class="bottomMenu">
<!-- content -->
</div>css：
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}jQuery：
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});这是我当前代码的Fiddle。
回答 2
Stack Overflow用户
发布于 2013-04-04 05:37:46
你已经有一些事情要做了。第一，为什么要上一节课？你的页面上真的有多个这样的东西吗？CSS建议你不能。如果不能，你应该使用ID -在CSS和jQuery中同时选择会更快：
<div id=bottomMenu>You read it all.</div>其次，在CSS中发生了一些疯狂的事情-特别是z-index应该只是一个数字，而不是以像素为度量单位。它指定此标记位于哪个层上，其中每个较高的数字离用户更近(或者换一种说法，位于/遮挡具有较低z索引的标记之上)。
您尝试执行的动画基本上是.fadeIn()，因此只需将div设置为display: none；，然后使用.fadeIn()将其设置为动画：
$('#bottomMenu').fadeIn(2000);.fadeIn()的工作方式是先执行display：(不管标记的显示属性是什么)，opacity: 0，然后逐渐增加不透明度。
完整的工作示例：
http://jsfiddle.net/b9chris/sMyfT/
CSS：
#bottomMenu {
display: none;
position: fixed;
left: 0; bottom: 0;
width: 100%; height: 60px;
border-top: 1px solid #000;
background: #fff;
z-index: 1;
}JS：
var $win = $(window);
function checkScroll() {
if ($win.scrollTop() > 100) {
$win.off('scroll', checkScroll);
$('#bottomMenu').fadeIn(2000);
}
}
$win.scroll(checkScroll);Stack Overflow用户
发布于 2017-04-09 15:48:44
你也可以这样做。
$(window).on("scroll", function () {
if ($(this).scrollTop() > 800) {
#code here
} else {
#code here
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15798360
复制相关文章
相似问题