如何固定一块div滑动到一定位置之后不再滑动？

主要是通过onscroll判断位置和高度，并修改style。最终还是要用position:fixed。
写了一个大概是最简单的用例，于是有些css细节没照顾到。你看看是否有帮助。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{
    width:40em;
    margin:0 auto;
}
article{
    float:left;
}
aside{
    float:right;
}
p{
    line-height:3em;
}
</style>
</head>
<body>
<article>
<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
</article>
<aside>
<p>侧边栏</p><p>侧边栏</p><p>侧边栏</p>
<div id="float"><p>漂浮侧边栏</p></div>
</aside>
<script type="text/javascript">
window.onload=
function(){
    var oDiv = document.getElementById("float"),
    H = 0,
    Y = oDiv
    while (Y) {H += Y.offsetTop; Y = Y.offsetParent}
    window.onscroll = function()
    {
        var s = document.body.scrollTop || document.documentElement.scrollTop
        if(s>H) {
            oDiv.style = "position:fixed;top:0;"
        } else {
            oDiv.style = ""
        }
    }
}
</script>
</body>
</html>

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

如何固定一块div滑动到一定位置之后不再滑动？