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

我想请教大家如何js让div不随滚动条滚动但是当到达该div的父亲div的边缘的时候它随父亲div滚动，换句话说，就是有两个div
<div id=div1>
<div id=div2></div>
</div>
我希望让div2在div1的高度范围内不随滚动条滚动，当div2到达div1边缘时随着div1滚动
我想要那个效果求实现方法

举报该文章

相关建议推荐于2016-04-27

试试这样的吧
<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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://22.t2y.org/zz/xhshth0xc.html

其他看法

第1个回答 2013-10-22

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

了解 jquery

如何获得容器的位置

如何获得滚动条的位置

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

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

然后看你的了

第2个回答 2013-10-22

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

第3个回答 2013-10-22

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

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

}

相似回答

大家正在搜