jQuery实现浮动层随浏览器滚动条滚动的方法
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下：
这是jQuery实现的一个浮动层效果，随浏览器滚动条而滚动，并一直保持在顶部位置，请使用火狐测试，IE下表现不尽理想。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery浮动层随浏览器滚动条滚动</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> if ($.browser.version != "6.0") { $(window).scroll(function(){ if($(this).scrollTop()>118 &&(($(document).height()-$(this).scrollTop())>($(window).height()+$(".aysw-footer").innerHeight()))){ $("#c_left").css({position: 'fixed', top: '2px'}); }else{ if(($(document).height()-$(this).scrollTop())<=($(window).height()+$(".aysw-footer").innerHeight())){ $("#c_left").css({position: 'absolute', top:($(".aysw-footer").offset().top-$("#c_left").innerHeight()-$(".page-home").offset().top-20) +'px'}); }else{ $("#c_left").css({position: 'absolute', top: '2px'}); } } }); } </script> </head> <body style="height:auto; margin:0; padding:0"> <div style="height:118px;background:#6CF;">sadfsadfasfsafd</div> <div class="page-home" style="min-height:1500px;width:100%; background-color:#FFC; position:relative"> <div id="c_left" style="border:1px solid red; width:200px ;height:800px; color:white;background-color:#333; position:absolute; top:2px"> 羞涩的浮动层... </div> </div> <div class="aysw-footer" style="height:200px; width:100%; background-color:#0C3; position:relative"></div> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法，包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项，需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法： jQuery： JavaScript： 以上2种方法均可以实现页面加载时滚动条自动滚动到底，小伙伴们根据自己的实际需求，自由选择吧
-
本文向大家介绍jQuery 顶部导航跟随滚动条滚动固定浮动在顶部，包括了jQuery 顶部导航跟随滚动条滚动固定浮动在顶部的使用技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍利用jquery禁止外层滚动条的滚动，包括了利用jquery禁止外层滚动条的滚动的使用技巧和注意事项，需要的朋友参考一下 前言 通常情况下，当内部滚动条滚动到两端时，再接着滚动时外层的滚动条就会跟着滚动；可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。 在
-
问题内容： 如何定义跨浏览器的CSS滚动条样式？我测试了此代码，它仅在IE和Opera中起作用，但在Chrome，Safari和Firefox中失败。 问题答案： 滚动条CSS样式是Microsoft开发人员发明的一种奇怪方法。它们不是CSS的W3C标准的一部分，因此大多数浏览器只是忽略它们。
-
本文向大家介绍jquery实现楼层滚动效果，包括了jquery实现楼层滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下 html: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
问题内容： 我正在设计网站的新布局，并且遇到了GIZMODO网站，我发现该网站可以利用页面滚动条来滚动网站中的部分内容。他们怎么做呢？我通过Firebug研究了他们的CSS，但是我很困惑。 这是我的测试页面1：此页面可以使内容居中，但不能根据需要滚动） 这是我的测试页面2：:（此页面可以根据需要滚动，但无法居中） 我只想使页面的左侧内容与页面滚动条一起滚动，但右侧内容保持原始位置，并且整个网站应居