CSS3如何实现元素的固定不滚动
在CSS3中，可以使用position: sticky;属性来实现元素的固定效果，即使元素在滚动时仍然保持在某个位置。position: sticky;的工作需要基于一些条件：
- 必须指定
top,right,bottom或left四个方向之一来指定sticky元素所需要达到的位置，才能使粘性定位生效。 - 其父元素不能有任何overflow属性设置为
visible的情况，否则sticky定位不会生效。
下面是一个简单的例子，演示如何使用position: sticky;来实现元素的固定效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
height: 200%;
margin: 0;
padding: 0;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 距离顶部的距离 */
background-color: yellow;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<p>向下滚动页面。</p>
<div class="sticky">我在滚动时保持固定。</div>
<p>继续向下滚动页面...</p>
</body>
</html>在这个例子中，.sticky类使得包含文本的<div>在滚动时保持在顶部。当用户向下滚动页面时，sticky元素会固定在顶部，并不会随着页面的其余部分滚动。
评论已关闭