内容摘要：这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，里面可以显示一些站长想要展示的内容。那么这样的效果是怎么实现的呢？下面来跟大家分享一下，这里分享的不支持IE6（当然，在网上可能有高手解决了各种浏览器的兼容问题）。...
这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，里面可以显示一些站长想要展示的内容。那么这样的效果是怎么实现的呢？下面来跟大家分享一下，这里分享的不支持IE6（当然，在网上可能有高手解决了各种浏览器的兼容问题）。
实现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。
需要跟随浏览器固定的DIV添加.fixed_side类后，使用如下代码即可实现（jsCode写在js文件中,cssCode写在css文件中）：
jsCode：
- //侧栏跟随浏览器
- $(function () {
- if ($(".fixed_side").length > 0) {
- var offset = $(".fixed_side").offset();
- $(window).scroll(function () {
- var scrollTop = $(window).scrollTop();
- //如果距离顶部的距离小于浏览器滚动的距离，则添加fixed属性。
- if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
- //否则清除fixed属性
- else $(".fixed_side").removeClass("fixed");
- });
- }
- });
- .fixed{position:fixed; top:20px;}
加入收藏
设为首页
