如何使用js实现css的sticky效果?
站长
· 阅读数 7
有一个页面为左右布局，在右侧面板中使用了sticky效果，发现它不仅实现了fixed功能，而且在面板高度大于浏览器视口的情况下，还能跟随滚动条移动直到被隐藏的内容全部显示，请问用js如何实现这一效果，有什么好的思路吗测试代码如下，将浏览器高度缩放到400左右，可以看到右侧面板文字能随滚动条全部显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
margin-top: 50px;
gap: 30px;
}
.l {
flex-shrink: 0;
width: 80%;
background-color: beige;
height: 1500px;
}
.r {
background-color: burlywood;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin
consectetur ligula vel
neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis
ornare quam
enim vel ipsum.
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at
mattis leo
placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus
nec, semper
arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit
vehicula
scelerisque ut vel sem. Ut ut semper nisl.
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa.
Integer
vestibulum non ante ornare eleifend. In vel mollis dolor.
</div>
<div>
<div class="r">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin
consectetur
ligula vel
neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien,
quis
ornare quam
enim vel ipsum.
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at
mattis leo
placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit
tellus
nec, semper
arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit
vehicula
scelerisque ut vel sem. Ut ut semper nisl.
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed
massa.
Integer
vestibulum non ante ornare eleifend. In vel mollis dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin
consectetur
ligula vel
neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien,
quis
ornare quam
enim vel ipsum.
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at
mattis leo
placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit
tellus
nec, semper
arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit
vehicula
scelerisque ut vel sem. Ut ut semper nisl.
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed
massa.
Integer
vestibulum non ante ornare eleifend. In vel mollis dolor.
</div>
</div>
</div>
<script></script>
</body>
</html>回复
1个回答
test
2024-06-27
有现成的 stickyfill 这个库可以用。对实现细节感兴趣可以直接看源码，开源的。
<style>
// 前面略
.r {
background-color: burlywood;
// position: sticky; // 这里注释掉
top: 0;
}
</style>
<script src="https://unpkg.com/stickyfilljs@2.1.0/dist/stickyfill.js"></script>
<div class="container">
<div class="l">略</div>
<div>
<div class="r">略</div>
</div>
</div>
<script>
Stickyfill.forceSticky(); // 注意需要强制开启 polyfill，否则在本就支持 CSS Sticky 的浏览器上就不会模拟了
Stickyfill.addOne(document.querySelector('.r'));
</script>回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容