内容摘要:这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的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");
- });
- }
- });
cssCode:
- .fixed{position:fixed; top:20px;}