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

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

Demo

---

html:

1 <h1 >请向下滚动页面 ↓</h1>

2 <div ></div>

3 <div ></div>

4 <div >

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

至此，效果已经完成！