脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 滚动条滑动固定效果

博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

 更新时间：2013年03月24日 21:49:35   作者：  
现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果

当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。

现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法，摘录之以供参考。

参考一、提高浏览量的特效：侧栏跟随滚动条

来源：卢松松博客
http://lusongsong.com/reed/453.html

代码如下：

CSS部分：

复制代码 代码如下:

/*侧栏跟随*/  
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注：每个网站的侧栏宽度不同，可根据你网页的宽度调整div1的宽度，我的是width:250px;，把这段代码添加到你的CSS文件中即可。

JS部分：

JavaScript代码

复制代码 代码如下:

//侧栏跟随   
(function(){   
    var oDiv=document.getElementById("float");   
    var H=0,iE6;   
    var Y=oDiv;   
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};   
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;   
    if(!iE6){   
        window.onscroll=function()   
        {   
            var s=document.body.scrollTop||document.documentElement.scrollTop;   
            if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}   
            else{oDiv.className="div1";}       
        };   
    }   
})();  

注：这段代码可放入任意JS文件中，比如我放在了util.js 文件里。

网页代码部分：

复制代码 代码如下:

<div id="box">  
<div id="float" class="div1">    
这里写你网站的代码与标签   
</div>  
</div>  

注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。

特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。

参考二、添加侧边栏随滚动条滚动效果（示例）

来源：自由的风博客（http://loosky.net/?p=2028）

步骤如下：

1、给侧边栏的各个模块加上一些class标志
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。添加ID也可以实现效果，但w3c标准不允许同一页面出现多个同样的ID，所以最好用class样式方式。

2、在网站页面中的任意js文件中加上如下代码：

JavaScript代码

复制代码 代码如下:

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动   
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块   
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块   

rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');   
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();   
objWindow.scroll(function() {   
if (objWindow.scrollTop() > offset.top){   
if(rollBox.html(null)){   
rollSet.clone().prependTo('.rollbox');   
}   
rollOut.fadeOut();   
rollBox.show().stop().animate({top:0,paddingTop:10},400);   
} else {   
rollOut.fadeIn();   
rollBox.hide().stop().animate({top:0},400);   
}   
});  

注：滚动区域的内容不能太长，不然会出现无限下拉的情况。

参考三、JQUERY SCROLL FOLLOW

这是一个插件，添加步骤也很简单，下载压缩包解压到网站目录，然后按照步骤操作即可。
详细可参考：
http://kitchen.net-perspective.com/open-source/scroll-follow/

示例页面：
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html

侧栏模块随窗口滑动（示例页面）
来源：http://www.mb-wx.com/common/msay.js
这段代码来自木本无心的博客（pjblog），原理很简单，就是当窗口到达指定模块位置后，开始判断其距离顶端的距离并进行调整。该段代码结合应用在了志文工作室博客侧边栏。

JavaScript代码

复制代码 代码如下:

//侧栏模块随窗口滑动   
jQuery(document).ready(function($) {   
 $(function() {   
  var $sidebar = $("#Side_relativelog"),   
  $window = $(window),   
  offset = $sidebar.offset(),   
  topPadding = 0;   
  $window.scroll(function() {   
   if ($window.scrollTop() > offset.top) {   
    $sidebar.stop().animate({   
     marginTop: $window.scrollTop() - offset.top + topPadding   
    });   
   } else {   
    $sidebar.stop().animate({   
     marginTop: 0   
    });   
   }   
  });   
 });   
}); 

您可能感兴趣的文章:

相关文章

  • 前端如何监听手机键盘是否弹起示例详解

    前端如何监听手机键盘是否弹起示例详解

    实际应用中我们会遇到监听按键输入和鼠标点击事件,这篇文章主要介绍了前端如何监听手机键盘是否弹起的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • avalon js实现仿微博拖动图片排序

    avalon js实现仿微博拖动图片排序

    玩微博的朋友都上传过图像吧，当图片上传后用户是可以随意拖动图片的，调整图片的顺序，那么此功能是怎么实现的，下面小编通过此篇文章给大家详解基于avalon js实现仿微博拖动图片排序，需要的朋友可以参考下
    2015-08-08
  • JS中toFixed()方法四舍五入的精度问题详解

    JS中toFixed()方法四舍五入的精度问题详解

    最近在做项目的时候,遇到了有四舍五入保留两位的需求,当时不假思索的直接使用了js原生的toFixed方法,结果出现了问题,这篇文章主要给大家介绍了关于JS中toFixed()方法四舍五入精度问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • JS表单验证的代码(常用)

    JS表单验证的代码(常用)

    最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到脚本之家平台，供大家学习，需要的朋友参考下吧
    2016-04-04
  • webpack 静态资源集中输出的方法示例

    webpack 静态资源集中输出的方法示例

    这篇文章主要介绍了webpack 静态资源集中输出的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • js url传值中文乱码之解决之道

    js url传值中文乱码之解决之道

    因为js url在传值的过程中使用的是js自己默认的字符集编码规则，我们必须把它转成属于我们自己的编码规格
    2009-11-11
  • js判断浏览器类型,版本的代码(附多个实例代码)

    js判断浏览器类型,版本的代码(附多个实例代码)

    当前世界上有很多种浏览器，除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器，有时候我们需要判断浏览器与版本方便后续的操作，一句话浏览器的兼容性太差了，缺少标准
    2014-05-05
  • Javascript this 的一些学习总结

    Javascript this 的一些学习总结

    相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字
    2012-08-08
  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能，现在无需服务器即可实现小程序的快速迭代，感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • 浏览器加载、渲染和解析过程黑箱简析

    浏览器加载、渲染和解析过程黑箱简析

    浏览器加载、渲染和解析过程的黑箱分析,对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到页面，渲染和下载同步进行,需要的朋友可以参考下
    2012-11-11

最新评论