做cpa建什么网站,网络维护工资多少一个月,宿迁网站建设费用,东阳市网站建设制作网页滚动条上下滚动固定元素左右不固定之sticky
有时候我们需要网页中某元素在上下滚动时可以固定在某一位置#xff0c;但是左右不固定#xff0c;也就是会随着左右滚动条滚动。那么我们可以通过 sticky 布局来解决。
position: sticky
我们先看看兼容性#xff1a; 在使…网页滚动条上下滚动固定元素左右不固定之sticky
有时候我们需要网页中某元素在上下滚动时可以固定在某一位置但是左右不固定也就是会随着左右滚动条滚动。那么我们可以通过 sticky 布局来解决。
position: sticky
我们先看看兼容性 在使用前需要考虑好兼容性的问题。
基本使用
!DOCTYPE html
html
head
meta charsetutf-8
title菜鸟教程(runoob.com)/title
style
p
{background-color:yellow;
}
p.padding
{padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;position: sticky;top: 20px;width: 1800px;
}
/style
/headbodyp这是一个没有指定填充边距的段落。/pp classpadding这是一个指定填充边距的段落。/pdiv stylewidth: 1800px; height: 2000px;/div/body测试结果 是不是很神奇没有丝毫卡顿希望能够早日全部浏览器都支持。
