博客侧边栏模块跟随滚动条滑动固定效果的实现方法(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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
Python进度条的制作代码实例
2019/08/31 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
django修改models重建数据库的操作
2020/03/31 Python
python 基于opencv去除图片阴影
2021/01/26 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
保安自我鉴定范文
2013/12/08 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
实习推荐信
2014/05/10 职场文书
实习护士自荐信
2014/06/21 职场文书
写给医院的感谢信
2015/01/22 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
入党自传范文2015
2015/06/26 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android