元素随滚动条滚动后固定在某个地方 & JS原生滚动加载动画
要实现元素随滚动条滚动后固定在某个位置，可以使用JavaScript监听滚动事件，并根据页面的滚动位置来更新元素的position属性。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Element on Scroll</title>
<style>
body, html {
height: 200%;
margin: 0;
padding: 0;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px; /* 距顶部10px的位置固定 */
background-color: yellow;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="sticky">
我会在滚动到顶部10px处时固定在这个位置。
</div>
<script>
// 如果不支持position: sticky，可以使用以下代码作为备用
/*
window.onscroll = function() {
var sticky = document.querySelector('.sticky');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 10) {
sticky.style.position = 'fixed';
sticky.style.top = '10px';
} else {
sticky.style.position = '';
}
};
*/
</script>
</body>
</html>在这个例子中，.sticky 类定义了元素在滚动到顶部10像素时的固定样式。当浏览器支持position: sticky时，CSS会处理固定的逻辑，否则JavaScript会介入以实现相同的效果。注意，使用position: sticky可以更简单地实现这个效果，并且它具有更好的浏览器兼容性。
评论已关闭