当前位置：首页 - 正文

js或者jquery实现div不随滚动条滚动

发布网友发布时间：2022-04-20 21:23

共4个回答

热心网友时间：2022-04-20 22:53

试试这样的吧
<body>
<div id="box" style="height:2000px;width:3000px;">
<div id="div1" style="width:500px;height:500px;background:green;position:absolute;">
    <div id="div2" style="width:200px;height:100px;background:lightblue;position:fixed;">里面的div</div>
</div>
</div>
</body>
<script type="text/javascript">
var sTop = 0;            //初始卷起的高度
var sLeft = 0;            //初始卷起的宽度
var p_div = document.getElementById("div1");        //父div
var max_x = p_div.offsetLeft+p_div.offsetWidth;        //父div的右边界
var max_y = p_div.offsetTop+p_div.offsetHeight;        //父div的下边界
window.onscroll = function(){
    var c_div = document.getElementById("div2");    //子div
    var s_top = document.documentElement.scrollTop || document.body.scrollTop;            //卷起的高度
    var s_left = document.documentElement.scrollLeft || document.body.scrollLeft;        //卷起的宽度
    if(s_top!=sTop){        //纵向滚动，当前卷起的高度和原卷起的高度不一致
        sTop = s_top;
        c_y = s_top+p_div.offsetTop+c_div.offsetHeight;            //子div当前的下边界坐标
        if(c_y>=max_y){                //如果下边界超过父div下边界
            c_div.style.position = "relative";
            c_div.style.top = (p_div.offsetHeight-c_div.offsetHeight)+"px";
            c_div.style.left = s_left+"px";
        }else{
            c_div.style.position = "fixed";
            c_div.style.top = "";
            c_div.style.left = "";
        }
    }
    if(s_left!=sLeft){        //纵向滚动
        sLeft = s_left;
        c_x = s_left+p_div.offsetLeft+c_div.offsetWidth;
        if(c_x>=max_x){
            c_div.style.position = "relative";
            c_div.style.left = (p_div.offsetWidth-c_div.offsetWidth)+"px";
            c_div.style.top = s_top+"px";
        }else{
            c_div.style.position = "fixed";
            c_div.style.left = "";
            c_div.style.top = "";
        }
    }
}
</script>

热心网友时间：2022-04-21 00:11

先了解了 css 的 position:fixed; 属性

了解 jquery

如何获得容器的位置

如何获得滚动条的位置

使用$(window).scroll(function(){

}) 每次页面滚动的时候都会触发它

然后看你的了

热心网友时间：2022-04-21 01:45

我感觉整体思路应该是：首先你要是想让div不随滚动条滚动，肯定是有一个position:fixed
然后就是绑定onscroll事件，检测什么时候达到你要求的临界值，改变div
的position:fixed就可以了。至于你的临界值是个什么情况，你可以在具体
百度一下搜一搜了。

热心网友时间：2022-04-21 03:37

css就可以了。
#div1{
height:300px;
overflow-y:auto;
}

#div2{
height:150px;
position:fixed;

}