前端css粘性布局,顶部吸附效果(position: sticky)

sticky属性设置

/* 设置粘性布局 */
position: sticky;
/* 拖动滚动条,当前元素超出文档0的位置时,触发定位效果(同级元素位置不会受影响) */
top: 0;

页面初始效果

设置前(滚动页面时,标签栏随页面滚动)
在这里插入图片描述在这里插入图片描述
设置后(标签栏达到指定位置时,固定于该位置)
在这里插入图片描述在这里插入图片描述

源码

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">*{margin: 0;}p{background: #e6f3ff;width: 100%;height: 200px;font-size: 30px;border: 4px solid #ddf;box-sizing: border-box;}ul{display: flex;background: #adddeb;border: 4px solid #ff4040;padding: 10px;text-align: center;/* 设置粘性布局 */position: sticky;/* 处于指定位置0时,触发固定效果 */top: 0;}li{list-style: none;flex: 1;}</style>
</head>
<body><p>头部内容</p><ul><li>标签1</li><li>标签2</li><li>标签3</li></ul><p>内容区1</p><p>内容区2</p><p>内容区3</p><p>内容区4</p>
</body>
<script type="text/javascript"></script>
</html>

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

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

相关文章

【深度学习】六大聚类算法快速了解

在机器学习中&#xff0c;无监督学习一直是我们追求的方向&#xff0c;而其中的聚类算法更是发现隐藏数据结构与知识的有效手段。目前如谷歌新闻等很多应用都将聚类算法作为主要的实现手段&#xff0c;它们能利用大量的未标注数据构建强大的主题聚类。本文从最基础的 K 均值聚类…

【二叉树进阶题目】236. 二叉树的最近公共祖先,JZ36 二叉搜索树与双向链表

二叉树进阶题目 236. 二叉树的最近公共祖先解题思路及实现思路一思路二 JZ36 二叉搜索树与双向链表描述解题思路及实现 236. 二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个…

Axios 拦截器 请求拦截器 响应拦截器

请求拦截器 相当于一个关卡&#xff0c;如果满足条件就放行请求&#xff0c;不满足就拦截 响应拦截器 在处理结果之前&#xff0c;先对结果进行预处理&#xff0c;比如&#xff1a;对数据进行一下格式化的处理 全局请求拦截器 axios.interceptors.request.use(config > { /…

SeaTunnel及SeaTunnel Web部署指南(小白版)

现在你能搜索到的SeaTunnel的安装。部署基本都有坑&#xff0c;官网的文档也是见到到相当于没有&#xff0c;基本很难找到一个适合新手小白第一次上手就能成功安装部署的版本&#xff0c;于是就有了这个部署指南的分享&#xff0c;小主已经把可能遇到的坑都填过了&#xff0c;希…

Web前端—移动Web第五天(媒体查询、Bootstrap、综合案例-alloyTeam)

版本说明 当前版本号[20231122]。 版本修改说明20231122初版 目录 文章目录 版本说明目录移动 Web 第五天01-媒体查询基本写法书写顺序案例-左侧隐藏媒体查询-完整写法关键词 / 逻辑操作符媒体类型媒体特性 媒体查询-外部CSS 02-Bootstrap简介使用步骤下载使用 栅格系统全局…

PTA 六度空间

“六度空间”理论又称作“六度分隔&#xff08;Six Degrees of Separation&#xff09;”理论。这个理论可以通俗地阐述为&#xff1a;“你和任何一个陌生人之间所间隔的人不会超过六个&#xff0c;也就是说&#xff0c;最多通过五个人你就能够认识任何一个陌生人。”如图1所示…

大白话DDD(DDD黑话终结者)

大白话DDD&#xff08;DDD黑话终结者&#xff09; 一、吐槽的话 相信听过DDD的人有很大一部分都不知道这玩意具体是干嘛的&#xff0c;甚至觉得它有那么一些虚无缥缈。原因之一是但凡讲DDD的&#xff0c;都是一堆特别高大上的概念&#xff0c;然后冠之以一堆让人看不懂的解释…

Python教程73:Pandas中一维数组Series学习

创建一维数据类型Series dataNone 要转化为Series的数据(也可用dict直接设置行索引) 若是标量则必须设置索引,该值会重复,来匹配索引的长度 indexNone 设置行索引 dtypeNone 设置数据类型(使用numpy数据类型) nameNone 设置Series的name属性 copyFalse 不复制 (当data为ndarray…

【深度学习】神经网络术语:Epoch、Batch Size和迭代

batchsize&#xff1a;中文翻译为批大小&#xff08;批尺寸&#xff09;。 简单点说&#xff0c;批量大小将决定我们一次训练的样本数目。 batch_size将影响到模型的优化程度和速度。 为什么需要有 Batch_Size : batchsize 的正确选择是为了在内存效率和内存容量之间寻找最…

Postgresql源码(116)提升子查询案例分析

0 总结 对于SQL&#xff1a;select * from student, (select * from score where sno > 2) s where student.sno s.sno; pullup在pull_up_subqueries函数内递归完成&#xff0c;分几步&#xff1a; 将内层rte score追加到上层rtbable中&#xff1a;rte1是student、rte2带…

一体化大气环境监测设备实时守护我们的空气质量

WX-CSQX12 随着空气污染问题的日益严重&#xff0c;大气环境监测设备成为了我们生活中不可或缺的一部分。而一体化的大气环境监测设备&#xff0c;更是为我们的环境保护工作带来了更多的便利和效益。 一体化大气环境监测设备是一种集成了多种功能于一体的环保设备&#xff0c;…

BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解(学习总结---从入门到深化)

目录 表格二 表单_基础表单 表单_被支持的控件 表单_表单状态 表格二 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑&#xff0c;单元格中的内补&#xff08;padding&#xff09;均会减半 <table class"table table-condensed table-bordered"…

学习量化交易如何入门?

Python 量化入门很简单&#xff0c;只需 3 步就能快速上手! 题主在程序方向没有相关经验&#xff0c;今天就从量化行业的通用语言-Python 着手&#xff0c;教大家如何快速入门。 一、准备工作 在开始 Python 编程之前&#xff0c;首先需要确保你的计算机上安装了合适的 Pytho…

【深度学习】Transformer简介

近年来&#xff0c;Transformer模型在自然语言处理&#xff08;NLP&#xff09;领域中横扫千军&#xff0c;以BERT、GPT为代表的模型屡屡屠榜&#xff0c;目前已经成为了该领域的标准模型。同时&#xff0c;在计算机视觉等领域中&#xff0c;Transformer模型也逐渐得到了重视&a…

2023亚太杯数学建模C题思路 - 我国新能源电动汽车的发展趋势

1 赛题 问题C 我国新能源电动汽车的发展趋势 新能源汽车是指以先进技术原理、新技术、新结构的非常规汽车燃料为动力来源( 非常规汽车燃料指汽油、柴油以外的燃料&#xff09;&#xff0c;将先进技术进行汽车动力控制和驱动相结 合的汽车。新能源汽车主要包括四种类型&#x…

【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 6

1、明明买了一个扫地机器人&#xff0c;可以通过以下指令控制机器人运动: F:向前走 10 个单位长度 L:原地左转 90 度 R:原地右转 90 度 机器人初始方向向右&#xff0c;需要按顺序执行以下那条指令&#xff0c;才能打扫完下图中的道路 A、F-L-F-R-F-F-R-F-L-F B、F-R-F-L-F-F…

h5如何使用navigateBack回退到微信小程序页面并携带参数

前言 在h5中使用navigateBack回退到微信小程序页面很常见&#xff0c;但是有一种交互需要在回退之后的页面可以得到通知&#xff0c;拿到标识之后&#xff0c;进行某些操作&#xff0c;这样的话&#xff0c;由于微信官方并没有直接提供这样的api&#xff0c;就需要我们开动脑筋…

视频剪辑有妙招:批量置入封面,轻松提升视频效果

随着社交媒体的兴起&#xff0c;视频已经成为分享和交流的重要方式。无论是专业的内容创作者还是普通的社交媒体用户&#xff0c;都要在视频剪辑上下一番功夫&#xff0c;才能让视频更具吸引力。而一个吸引的封面往往能在一瞬间抓住眼球&#xff0c;提高点击率。还在因如何选择…

uni-app - 弹出框

目录 1.基本介绍 2.原生uinapp 通过uni.showActionSheet实现 3.使用组件 Popup 弹出层 ③效果展示 1.基本介绍 弹出框让我们在需要时在屏幕底部弹出一个菜单&#xff0c;它通常用于在各种应用程序中进行选择操作。Uniapp为我们提供了基本的底部弹出框组件&#xff0c;但它也有…

OpenSearch开发环境安装Docker和Docker-Compose两种方式

文章目录 简介常用请求创建映射写入数据查询数据其他 安装Docker方式安装OpenSearch安装OpenSearchDashboard Docker-Compose方式Docker-Compose安装1.设置主机环境2.下载docker-compose.yml文件3.启动docker-compose4.验证 问题问题1&#xff1a;IPv4 forwarding is disabled.…