本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下：

这是jQuery实现的一个浮动层效果，随浏览器滚动条而滚动，并一直保持在顶部位置，请使用火狐测试，IE下表现不尽理想。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-float-follow-nav-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery浮动层随浏览器滚动条滚动/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' if($。浏览器。版本！='6.0') { $(窗口)。滚动(函数(){ if($(this)).scrollTop()118 (($(文档))。高度()-$(这个)。scrollTop())($(窗口)。高度()$(' .aysw-页脚').innerHeight()))){ $('#c_left ').css({position: 'fixed '，top : ' 2px ' })；} else { if($(document)).高度()-$(这个)。scrollTop())=($(window).高度()$(' .aysw-页脚').innerHeight())){ $('#c_left ').css({position: 'absolute '，top:($(').aysw-页脚').偏移量()。top-$('#c_left ').innerHeight()-$(' .主页')。偏移量()。top-20)' px ' })；}else{ $('#c_left ').css({position: 'absolute '，top : ' 2px ' })；} } });}/脚本/头体样式=' height : automargin :0 padd :0 ' div style=' height :118 px；背景# 6CF ' sadfsadfasfsafd/div div class=' page-home ' style=' min-height :1500 px；宽度：100%;背景色： # FFC；相对位置div id=' c _ left ' style='边框：1 px纯红；宽度宽度：200像素高度：800 px颜色：白色；背景色： # 333;位置：绝对；top:2px '羞涩的浮动层./div/div class=' aysw-footer ' style=' height :200 px；宽度：100%;背景-颜色： # 0c 3；位置：相对/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。