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

网页滚动条上下滚动固定元素左右不固定之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>

测试结果:

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Timeshift系统备份与还原

Timeshift系统备份与还原 系统备份 一般Linux系统是比较稳定的&#xff0c;但是一旦崩溃就很难恢复&#xff0c;这里介绍 Timeshift系统备份工具。 安装Timeshift ubuntu 和 linux mint sudo apt-add-repository -y ppa:teejee2008/ppa sudo apt-get update sudo apt-get ins…

图片床

仅供存储图片

Angular实现dialog对话框封装

Angular实现dialog对话框封装 为什么要封装? 对于Angular Material UI库中的dialog组件,实在不是很好用,所以打算简单封装一下啊。 直接代码吧。 封装dialog组件 1.创建一个dialog组件 2.dialog.component.html文件 <ng-template #dialog><!-- 对话框投射内容…

Ubuntu LinuxMint安装微信QQ阿里旺旺

Ubuntu LinuxMint安装微信QQ阿里旺旺 目前linux大部分桌面发行版都可以安装windows版本的微信、QQ、阿里旺旺等软件了&#xff0c;这是deepin系统的功劳&#xff0c;这里还要感谢一下 前深度CEO 勇哥的不懈努力和坚持。 安装 这里推荐一个移植好的安装方法。 zq1997/deepin-w…

Angular消息通知组件ngx-notification

Angular消息通知组件ngx-notification It is a flexible and usable component. Demo Demo Installation 1.You need install @flywine93/ngx-notification by npm npm install @flywine93/ngx-notification --save2.You need install @flywine93/ngx-autounsubscrb npm …

01-go安装

01-go安装 本教程适用于linux发行版安装。 当前系统使用的是linux mint 19.ubuntu deepin 等同理。 下载安装包 下载地址 go downloads。 选择Linux包点击下载。 开始安装 1.设定安装目录 在下载好的压缩包文件夹内打开终端&#xff0c;并设置安装目录环境变量&#xff0c…

02-go的IDE安装

02-go的IDE安装 此篇文章是在go已经安装的前提下进行的&#xff0c;如果go还没有安装请参考这篇文章 01-go安装。 本文章使用的是vscode作为go IDE&#xff0c;所以需要提前安装好vscode&#xff0c;并且是在linux系统下。 当前系统为linux mint 19&#xff0c;ubuntu deepin…

go validator使用教程

go validator使用教程 很多时候在B/S开发过程中,经常会遇到对参数的校验工作,一般客户端需要提前验证一次提交的数据是否合理,以减少后端的压力,而后端是必须要对数据做验证的。 一般验证的方式大多都是if-else,这种方式会让你掉入无底的深渊,就像下面一样。 [图片来源…

golang代理转发基础

golang代理转发基础 go标准库已经实现了一个反向代理工具,通过代理将客户端的请求转发到代理服务器。 什么是反向代理? 维基百科解释: ”In computer networks , a reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or…

go之树型结构深度理解

go之树型结构深度理解 如果你是一个编程人员,或多或少对树型结构都有一定的认识,我个人对树型数据结构是又爱又恨。这篇文章主要讲解一些关于tree的数据结构以及使用。 什么是树? 数组、列表、队列、队列、堆栈都是以一个集合的形式存储数据,一般称它们被称为 "线性…

Go信号gsignal和宿主Signal

信号gsignal和宿主Signal signal包提供了信号处理程序,并允许我们的Go程序与输入的信号进行交互。 订阅 信号的订阅是通过channel来完成的,下面是一个例子,功能是监听任何终端信号或者终端退出的信号。 每个os.Signal通道监听自己的事件。 Go还提供了停止通知通道的功能,…

Angular实现图片点击缩放组件

Angular实现图片点击缩放组件 本文将设计一个用于网页中点击图片缩放的 Angular 组件。阅读需要注意的是,本文只讲解原理和设计理念,不过多讲解Angular框架的API。 线demo。 需求分析 一般用户在阅读文章的时候,由于种种限制,图片会比较小,所以需要提供一个可以查看图…

Vscode Todo Tree插件

Vscode Todo Tree插件 安装 打开 vscode 扩展中心&#xff0c;搜索 todo tree 然后安装&#xff0c; 配置 打开vscode设置&#xff0c;文件→首选项→设置&#xff0c;然后以json文件打开&#xff0c;并增加以下配置 "todo-tree.highlights.customHighlight": {&…

Albert launcher安装与使用

Albert launcher安装与使用 安装 安装系统为: linuxmint 20 打开终端执行&#xff1a; curl https://build.opensuse.org/projects/home:manuelschneid3r/public_key | sudo apt-key add - echo deb http://download.opensuse.org/repositories/home:/manuelschneid3r/xUbu…

Linuxmint 美化之路

经过无数次的实验&#xff0c;最终配置了一套比较舒服的主题&#xff0c;审美在不断的提高&#xff0c;但是内在快跟不上了哈 1. 安装主题 先下载资源包&#xff0c;资源包是收费的&#xff0c;算是犒赏吧。 https://download.csdn.net/download/wf19930209/23520618 1.1 更…

初识 Arm 处理器

英国ARM公司是全球领先的半导体知识产权&#xff08;IP&#xff09;提供商。全世界超过95%的智能手机和平板电脑都采用ARM架构。ARM设计了大量高性价比、耗能低的RISC处理器、相关技术及软件。2014年基于ARM技术的全年全球出货量是120亿颗&#xff0c;从诞生到现在为止基于ARM技…

模拟神器之QEMU

1. 简介 QEMU&#xff08;quick emulator&#xff09;是一款由法布里斯贝拉&#xff08;Fabrice Bellard&#xff09;等人编写的免费的可执行硬件虚拟化的&#xff08;hardware virtualization&#xff09;开源托管虚拟机&#xff08;VMM&#xff09;。 QEMU 是一个托管的虚拟…

X86_64平台运行Arm docker容器

QEMU是什么 QEMU是一个通用的开源的跨平台仿真模拟器&#xff0c;提供user和system两种模式。其模拟的作用可是可以模拟在特定的体系结构下的应用的执行或者构建&#xff0c;比如在x86的体系结构的操作系统上运行ARM的应用。 常见问题的场景 在ARM体系结构的硬件环境中安装D…

Boost Arm 交叉编译

Boost Arm 交叉编译 1. 源码下载 下载地址&#xff1a;https://sourceforge.net/projects/boost/files/boost/ 这里下载 1.74.0 版本 然后解压。 2. 配置 有些库我们是不需要的&#xff0c;所以就不需要编译&#xff0c;可以通过 -show-libraries 查看库列表 vincentmsi-…

为什么Linux会开机黑屏?

有的童鞋由于工作的需要&#xff0c;或者想体验一把无广告的世界&#xff0c;会去尝试使用Linux的发行版&#xff0c;但是经常被Linux拒之门外&#xff0c;甚至连系统到装不上&#xff0c;当然这个现象也在越来越少&#xff0c;只有更多的人去使用它&#xff0c;它才会变的更好…