在800px之后在scrollDown上显示div
我想从页面顶部向后滚动800px后显示一个隐藏的div。 现在我有这个例子，但我想它需要修改，以达到我所期待的。
编辑：
[而当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); } }); }); });
这是我当前代码的小提琴 。
如果要在滚动多个像素后显示div，请执行以下操作：
工作示例
$(document).scroll(function() { var y = $(this).scrollTop(); if (y > 800) { $('.bottomMenu').fadeIn(); } else { $('.bottomMenu').fadeOut(); } });
$(document).scroll(function() { var y = $(this).scrollTop(); if (y > 800) { $('.bottomMenu').fadeIn(); } else { $('.bottomMenu').fadeOut(); } });
body { height: 1600px; } .bottomMenu { display: none; position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Scroll down... </p> <div class="bottomMenu"></div>
你有一些事情在那里。 一，为什么要上课？ 你实际上有多个这样的网页？ CSS表明你不能。 如果不是，你应该使用一个ID – 在CSS和jQuery中select都更快：
<div id=bottomMenu>You read it all.</div>
其次，在CSS中发生了一些疯狂的事情 – 特别是z-index应该是一个数字，而不是以像素为单位。 它指定了该标签所在的层，其中每个较高的数字更接近用户（或者换句话说，位于/ occluding具有较低z-索引的标签之上）。
你试图做的animation基本上是.fadeIn（），所以只需设置div显示：无; 最初并使用.fadeIn（）来animation它：
$('#bottomMenu').fadeIn(2000);
.fadeIn（）的工作原理是先显示：（无论标签的显示属性是什么），不透明度：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);
SCROLLBARS＆ $(window).scrollTop()
我发现的是，在上面提到的解决scheme中调用了这样的function（在这个论坛中有更多这样的例子 – 这一切都很好），只有当滚动条实际上可见和正在运行时才能成功。
如果（因为我可能愚蠢地尝试过），你希望实现这样的function，你也希望，我们应该说，实现一个简单的“干净的屏幕”没有滚动条，如在这个讨论 ，然后$(window).scrollTop()将不起作用。
这可能是一个编程的根本，但我认为我会提供给所有的新手头，因为我花了很长时间搞清楚这一点。
如果有人可以提出一些build议，以便如何克服这个或更多的见解，随时回答，因为我不得不求助于显示/隐藏onmouseover / mouseleave 在这里
Live live和节目，CollyG。
你也可以做到这一点。
$(window).on("scroll", function () { if ($(this).scrollTop() > 800) { #code here } else { #code here } });
