在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 } });