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

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

 

Demo

---

 

 

html: 

 

1      < h1  style ="color:#159" >请向下滚动页面 ↓ </ h1 >
2      < div  style ="height:1000px;" ></ div >
3      < div  id ="last" ></ div >
4      < div  id ="slidebox" >
5          < a  class ="close"  title ="关闭" >close </ a >
6          < h2 >华生_ </ h2 >
7          < p >分享一些前端的笔记_  < br  />< a  href ="http://www.cnblogs.com/jmjweb" >http://www.cnblogs.com/jmjweb </ a ></ p >
8      </ 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;}
10  #slidebox h2{ color: #159; font-size: 18px; margin: 5px 20px 5px 0px;}
11  a.close{ overflow: hidden; position: absolute; cursor: pointer; top: 10px; right: 10px; color: #aaa}
12   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);
10             }
11                     
12         });
13         
14         $('#slidebox .close').bind('click', function(){                     // 关闭按钮
15             $( this).parent("#slidebox").stop( true).animate({'marginLeft':'-430px'},100);
16         });
17     });

 

 

至此，效果已经完成！ 

 

转载于:https://www.cnblogs.com/jmjweb/p/3158328.html