web前端|js教程
滚动条,滑动固定
web前端-js教程
当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。
现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法，摘录之以供参考。
参考A、提高浏览量的特效：侧栏跟随滚动条
来源：卢松松博客
/reed/453.html
代码如下：
CSS部分：
微信源码查看,ubuntu删除自带软件,tomcat 安全验证码,爬虫截图网页,php商户什么意思,东光seolzw
/*侧栏跟随*/
#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代码
仿源码爱好者,vscode官网插件安装,conky ubuntu,开启两个tomcat,sqlite tree,合肥网页设计师,带数据库php空间,查找ftp服务器,jquery 聊天 插件,xss前端框架,牙齿爬虫,php 过滤函数,旺道seo工具,springboot升级步骤,dedecms文章内容标签,java购物网站代码,网页图片另存为的代码,微信店铺模板,网站后台样式,easyui登录页面源码,学校管理系统 源码,遗传程序设计代码lzw
//侧栏跟随
(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 文件里。
网页代码部分：
这里写你网站的代码与标签
注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。
特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。
参考B、添加侧边栏随滚动条滚动效果（示例）
来源：自由的风博客（/?p=2028）
步骤如下：
1、给侧边栏的各个模块加上一些class标志
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。添加ID也可以实现效果，但w3c标准不允许同一页面出现多个同样的ID，所以最好用class样式方式。
2、在网站页面中的任意js文件中加上如下代码：
JavaScript代码
社区服务站源码,Ubuntu修复坏扇区,python 高性能爬虫,clion配置php,seo yun jilzw
var rollStart = $(.Statistics), //滚动到此区块的时候开始随动
rollOut = $(.WidgetMeta,.Statistics); //隐藏rollStart之后的区块
rollSet = $(.RRPosts,.TagsCloud); //添加rollStart之前的随动区块
rollStart.before(
);
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);
}
});
注：滚动区域的内容不能太长，不然会出现无限下拉的情况。
参考C、JQUERY SCROLL FOLLOW
这是一个插件，添加步骤也很简单，下载压缩包解压到网站目录，然后按照步骤操作即可。
详细可参考：
-/open-source/scroll-follow/
示例页面：
-/sf-example-1.html
-/sf-example-2.html
-/sf-example-3.html
-/sf-example-4.html
侧栏模块随窗口滑动（示例页面）
来源：http://www.mb-/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
});
}
});
});
});
如果觉得《博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)【javascript】》对你有帮助，请点赞、收藏，并留下你的观点哦！
