• WAP手机版 RSS订阅 加入收藏  设为首页
技术教程

侧边栏DIV跟随浏览器滚动固定显示的实现

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

相关评论
诚信网站 备案信息 网警110 不良信息举报 网络安全监察 QQ站长联盟安全认证 360安全认证网站
冀ICP备13003921号-1