滚动位置时显示Div

首先我想参考这个网站: http : //annasafroncik.it/我喜欢这些animation。 难以在jQuery中创build一个类似的function? 有没有插件来创造这样的效果?

希望有人能帮助我。

基本上,你想添加一个“hideme”类到你想要隐藏的每个元素(然后你将该类设置为“opacity:0”;

然后,使用jQuery设置一个$(window).scroll()事件来检查每个“hideme”元素的底部与可见窗口底部边缘的位置。

这是它的肉…

/* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).offset().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it in */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } }); }); 

这是一个完整的jsfiddle: http : //jsfiddle.net/tcloninger/e5qaD/

插件? 也许吧,但是你完全可以build立你自己可以用jQuery想象的animation组合。 如果你对select器和CSS有一个牢固的把握,天空就是极限! 我build议从jQuery网站开始,并检查一些例子 。

为了帮助实现滚动,也许给你一些想法,如果你已经熟悉jQuery,你可以尝试下面的方法…找出你的div的页面有多远,听滚动事件,当div进入焦点(即:页面已经滚动过div的位置),运行一个animation。 就像是:

 <div id="my_div">Some content</div> <script type="text/javascript"> $(document).ready(function() { var my_div = $("#my_div"); var div_top = my_div.offset().top; $(document).scroll(function() { if (div_top <= $(document).scrollTop()) { // do some cool animations... } }); }); </script> 

我希望我没有搞乱我的语法!

尝试这个 。 它为我工作

 $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 400) { $("body").addClass("allowshow"); } else { $("body").removeClass("allowshow"); } }); 

和CSS这是

 .showmydiv{display:block}