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


Posted in Javascript onMarch 24, 2013

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、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    
    });    
   }    
  });    
 });    
}); 
Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
VUE实现日历组件功能
Mar 13 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
js 字符串转换成数字的三种方法
Mar 23 #Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 #Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 #Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 #Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 #Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 #Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python实现电脑自动关机
2018/06/20 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python中的字符串内部换行方法
2018/07/19 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
会计顶岗实习心得
2014/01/25 职场文书
团结演讲稿范文
2014/05/23 职场文书
学校火灾防控方案
2014/06/09 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
公司内部升职自荐信
2015/03/27 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android