JS实现div随屏幕滚动到一定高度后固定的代码

洪七公 · 发表于 2023-4-11 00:30:28

直接给出代码，大家复制到本地html文档内预览一下效果就知道了！

这个是可以放置在任何场景使用的，最常见的就是左侧导航或者广告，右侧是内容页，内容不断下拉，左侧位置固定跟随！

直接给出代码：

<!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>
这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落内容这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
</article>
<aside>
这里会滚动这里会滚动这里会滚动
<div id="fixPara">这个段落到达一定高度会固定</div>
</aside>
<script type="text/javascript">
window.onload=
function(){
var oDiv = document.getElementById("fixPara"),
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要设置一个id=fixPara，然后实现起来就非常方便灵活了！

好了，关于JS实现div随屏幕滚动到一定高度后固定的代码就介绍到这，感谢大家的支持与厚爱，更多内容请搜索锦尚中国获取！

		自动登录	找回密码
密码			会员注册

[JavaScript] JS实现div随屏幕滚动到一定高度后固定的代码