网站首页 > 知识剖析 正文
需求:当页面很长,有滚动条时,需要固定页面上的部分元素,便于下方元素和上方固定元素的对照。
.box1{
width: 100%;
height: 50px;
background: skyblue;
}
.box2{
width: 100%;
height: 50px;
background: darkorange;
position: sticky;
top: 0;
}
.box3{
width: 100%;
/*height: 1000px;*/
}
<div class="box1">这是一行文字</div>
<div class="box2">这是要固定的部分</div>
<div class="box3">
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
......
</div>
猜你喜欢
- 2024-12-25 uni-app入门理论知识 uni-app入门到实战
- 2024-12-25 公开招标=轴承滚动体厂齿箱滚子生产线厂房东侧通道维修项目
- 2024-12-25 vue实现滑块拖拽校验 vue滑动条
- 2024-12-25 Vue中如何实现列表动画 vue 动画示例
- 2024-12-25 2022年最好的10个JavaScript动画库
- 2024-12-25 MacOS 如何选择鼠标不飘滚动平滑 mac鼠标滑轮上下滚动设置
- 2024-12-25 新版Chrome浏览器如何使用网页滚动截图
- 2024-12-25 10个滚动到底部自动加载插件 10个滚动到底部自动加载插件是什么
- 2024-12-25 前端特效 | 如何制作一个彩虹滚动进度条?
- 2024-12-25 滚动图标——手机图标随着手势滚动,让你的桌面动起来
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)