当前位置:   article > 正文

html右侧浮动栏随着滚动,js代码实现右侧边栏智能跟随滚动条悬浮固定窗口位置浮动滚动...

css右浮窗跟随滚动条移动

如果侧边栏的文章过长,那么右侧侧边栏可能没这么长.

那就导致右侧可能是空的,如果让右侧的侧边栏悬浮广告或者悬浮的文章列表智能跟随窗口那不是很好了?

先分享一遍以前用的简单的(以前用的时候IE6不兼容,不过话说现在IE8都快没人用了,所以应该不太重要吧).

网上一搜一大堆,没有一个能用,全是复制粘贴 别人的,我也是醉了.

实现侧边栏浮动效果需要3个部分,html+css+js

实现右侧边栏智能跟随窗口浮动滚动CSS部分:

把这段代码添加到你的CSS文件中即可。

/*侧栏跟随*/

#box{float:left; position:relative;width:300px;}

.div1{width:300px;}

.div2{position:fixed;_position:absolute;top:0;z-index:250;}

备注: 每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:300px;

css部分可以自己修改.

实现右侧边栏智能跟随窗口浮动滚动JS部分:

//侧栏跟随

(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.οnscrοll=func

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/76903?site
推荐阅读
相关标签
  

闽ICP备14008679号