jQuery实现鼠标滚动条到页面底部浮动层滑动弹出信息

学习了一个效果，当滚动条滚动到页面底部时，弹出一个元素

Demo

---

html: 

     <h1 style="color:#159">请向下滚动页面 ↓</h1>

     <div style="height:1000px;"></div>

     <div id="last"></div>

     <div id="slidebox">

         <a class="close" title="关闭">close</a>

         <h2>华生_</h2>

         <p>分享一些前端的笔记_ <br /><a href="http://www.cnblogs.com/jmjweb">http://www.cnblogs.com/jmjweb</a></p>

     </div> 

css:

初始化，主要是把#slidebox 固定在页面的底部 

 1 #slidebox{
 2     width:400px;height:100px;overflow:hidden;padding:10px;background-color:#fff;border-top:3px solid #159;position:fixed;left:0;bottom:0px;_position:absolute;margin-left:-430px;
 3     -moz-box-shadow:-2px 0px 10px #aaa;
 4     -webkit-box-shadow:-2px 0px 10px #aaa;
 5     box-shadow:-2px 0px 10px #aaa;
 6 }
 7 #slidebox p{color:#555;line-height:22px;font-size:12px;margin:10px 0;}
 8 a.more{cursor:pointer;color:#159;font-size:12px;}
 9 a.more:hover{text-decoration:underline;}
 #slidebox h2{color:#159;font-size:18px;margin:5px 20px 5px 0px;}
 a.close{overflow:hidden;position:absolute;cursor:pointer;top:10px;right:10px;color:#aaa}
 a.close:hover{color:#159} 

javascript:

通过 offset()、 height()、scrollTop()这三个函数判断滚动条是否在页面底部，如果是，将#slidebox 滑出

  1 $(function(){

 2         $(window).scroll(function(){

 3         

 4             var distanceTop = $('#last').offset().top - $(window).height();        

 5         

 6             if($(window).scrollTop() > distanceTop){                    //判断是否滚动到页面底部

 7                 $('#slidebox').animate({'marginLeft':'0px'},300);

 8             }else{ 

 9                 $('#slidebox').stop(true).animate({'marginLeft':'-430px'},100);

             }

                     

         });

         

         $('#slidebox .close').bind('click',function(){                    //关闭按钮

             $(this).parent("#slidebox").stop(true).animate({'marginLeft':'-430px'},100);

         });

     });

至此，效果已经完成！