极客观点
项目管理
HarmonyOS
有一个页面为左右布局，在右侧面板中使用了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>
有现成的 stickyfill 这个库可以用。对实现细节感兴趣可以直接看源码，开源的。