当前位置: 首页 > news >正文

Bootstrap中固定某一个元素不随滚动条滚动

可以利用类sticky-top实现固定某个元素在顶部的效果,示例代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>固定某一个元素不随滚动条滚动</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-white"><nav class="sticky-top bg-primary p-5 mb-5">昊虹商城</nav><div class=" bg-secondary p-3"><p>家用电器</p><p>手机数码</p><p>家具家电</p><p>男装女装</p><p>男鞋户外</p><p>玩具乐器</p><p>生鲜特产</p><p>白酒红酒</p><p>礼品鲜花</p></div>
</div>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/187280.html

相关文章:

  • 时序数据库 IoTDB 发布端边云原生解决方案,有效优化工业互联网数据上传时效与资源消耗...
  • Spring Boot中实现发送文本、带附件和HTML邮件
  • MySQL5.7版本与8.0版本在CentOS系统安装
  • 【gitlab】从其他仓库创建项目
  • 【ARM CoreLink 系列 6 -- DMC-400控制器简介】
  • 在 Azure 中开发云原生应用程序:工具和技巧
  • 【Redis】基础数据结构-字典
  • 平板第三方电容笔怎么样?便宜的ipad触控笔推荐
  • pytorch_神经网络构建3
  • 遗传算法入门笔记
  • 【golang】go 返回参数 以及go中 裸返
  • elasticsearch深度分页问题
  • 32、Flink table api和SQL 之用户自定义 Sources Sinks实现及详细示例
  • Java练习题-用冒泡排序法实现数组排序
  • 【SV中的多线程fork...join/join_any/join_none】
  • 翻译:网站整站翻译 / 网站国际化 / 极简实现
  • 深度森林(deep-forest)安装
  • ping.pe ping 检测IP全球延迟
  • nodejs 16版本
  • NSSCTF做题(7)
  • 【GIT版本控制】--高级分支策略
  • 【Qt控件之QDialog】使用及技巧
  • Transformer预测 | Python实现基于Transformer的股票价格预测(tensorflow)
  • spark sql如何行转列
  • Prompt-Tuning(一)
  • 域信息收集
  • MySQ 学习笔记
  • pdf文档内容提取pdfplumber、PyPDF2
  • 运算符
  • 利用freesurfer6进行海马分割的环境配置和步骤,以及获取海马体积