滚动位置时显示Div

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

希望有人能帮助我。

Answer 1

基本上，你想添加一个“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/

Answer 2

插件？ 也许吧，但是你完全可以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> 

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

Answer 3

尝试这个 。 它为我工作

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

和CSS这是

 .showmydiv{display:block}