图片待添加
图片待添加

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

2020-02-07 16:57 分类:WordPress主题开发制作教程, WordPress教程 阅读(次阅读) 标签:,

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

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

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

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

我另外写了一个侧边栏固定教程:  使用jquery滚动侧边栏固定插件 theia-sticky-sidebar.js

实现侧边栏浮动效果需要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.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:

方法A: 一种是 另存为 sidebar.js(文件名自定义)

然后文章底部添加

<script src="bootstrap/js/sidebar.js"></script>

就能调用本js了.(注意js的路径要以自己的为准)

方法B: 直接在网页底部调用:

代码如下:

<script>
//wpyi.com 侧栏跟随   
(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";}       
        };   
    }   
})();
</script>

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

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

如果你的网页是自适应的需要在手机的分辨率下自动关掉功能.

@media only screen and (max-width: 990px) {
/*侧栏跟随*/  
#box{ position:relative;width:250px; display:none;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
}

display:none; 就是直接在手机分辨率下这个窗口取消显示了.

如果要显示的话就把position的属性改为position:static;:

/*侧栏跟随*/  
#box{ position:static;width:100%;}
.div1{width:100%;}
.div2{position:static;_position:static;top:0;z-index:250;}

 


本文地址: https://www.wpyi.com/js-sidebar-gundong.html