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}

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

}

});

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

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

});

});

至此，效果已经完成！