网页滚动条上下滚动固定元素左右不固定之sticky

有时候我们需要网页中某元素在上下滚动时可以固定在某一位置，但是左右不固定，也就是会随着左右滚动条滚动。那么我们可以通过 sticky 布局来解决。

position: sticky

我们先看看兼容性：

在使用前需要考虑好兼容性的问题。

基本使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-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>
</head><body><p>这是一个没有指定填充边距的段落。</p><p class="padding">这是一个指定填充边距的段落。</p><div style="width: 1800px; height: 2000px;"></div></body>

测试结果：

是不是很神奇？没有丝毫卡顿，希望能够早日全部浏览器都支持。

网页滚动条上下滚动固定元素左右不固定之sticky相关推荐

html网页滚动条自动滚动,win10网页滚动条自动滚动怎么办-解决网页滚动条自动滚动的方法 - 河东软件园...
在使用电脑浏览器进行浏览网页的时候,我们会使用鼠标上的滑轮来下拉网页进行浏览.最近有位win10用户向小编分享了一个系统错误,在打开浏览器之后我们不使用鼠标,但是网页会自动下滑到最末端.在排除了鼠标硬 ...
[转]如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position属性,说到定位,我们很容易想到这个属性.这个属性一共有四个选项:static.relative.absolute.fi ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置
利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...
php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
实例元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持语法 HTM ...
dom元素滚动条高度 js_javascript 设置元素滚动大小
3. 滚动大小最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
overflow-anchorCSS中的属性相对较新,2017 年首次推出 Chrome ¹,2019 年推出 Firefox,现在 Edge在 2020 年推出 Chrome 过渡.幸运的是,它的使 ...
JS网页滚动条滚动事件实例分析
js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧本文实例讲述了js网页滚动条滚动事件用法,具体分析如下: 在做js返回顶部的效果时,要 ...
滚动html颜色,利用CSS设置网页滚动条颜色
如何用CSS设置滚动条颜色 www.52css.com 我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是 ...

网页滚动条上下滚动固定元素左右不固定之sticky

网页滚动条上下滚动固定元素左右不固定之sticky

position: sticky

基本使用

网页滚动条上下滚动固定元素左右不固定之sticky相关推荐

最新文章

热门文章