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

news2024/11/15 23:29:35

可以利用类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.coloradmin.cn/o/1075259.html

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

相关文章

vue3 antv 静态登录页面

效果图 <template> <!-- 内容区域 --><div class"main"><div class"from"><!-- 表单 model是antv里边的绑定表单数据 --><a-form :model"formState" ref"formRef"><!-- 切换 --><a-tabs…

06-进程间通信

学习目标 熟练使用pipe进行父子进程间通信熟练使用pipe进行兄弟进程间通信熟练使用fifo进行无血缘关系的进程间通信使用mmap进行有血缘关系的进程间通信使用mmap进行无血缘关系的进程间通信 2 进程间通信相关概念 2.1 什么是进程间通信 Linux环境下&#xff0c;进程地址空间…

FPGA设计时序约束四、多周期约束

目录 一、背景 二、set_multicycle_path a)Targets界面 b)options界面 c)setup与hold关系 三、多周期约束场景 3.1 单时钟域的多周期约束 3.2 多周期路径与时钟相移 3.3 慢时钟到快时钟的多周期约束 3.4 快时钟到慢时钟的多周期约束 四、工程示例 五、参考 一、背景…

广州华锐互动:VR互动教学平台如何赋能职业院校?

随着科技的发展&#xff0c;我们的教育方式也在不断进步。其中&#xff0c;虚拟现实&#xff08;VR&#xff09;技术的出现为我们提供了一种全新的教学方式。特别是在职业学校中&#xff0c;VR互动教学平台已经成为一种重要的教学工具。 VR互动教学平台是一种利用虚拟现实技术创…

游戏软件开发与应用软件开发有什么不同呢?

游戏软件开发和应用软件开发是两种不同类型的软件开发&#xff0c;它们在许多方面都有不同之处。以下是它们之间的一些主要区别&#xff1a; 目标用户群体&#xff1a; 游戏软件开发的主要目标是提供娱乐和休闲体验&#xff0c;通常面向广大的游戏玩家群体。游戏软件的设计和开…

【java基础学习】之DOS命令

#java基础学习 1.常用的DOS命令&#xff1a; dir:列出当前目录下的文件以及文件夹 md: 创建目录 rd:删除目录cd:进入指定目录 cd.. :退回到上级目录 cd\ : 退回到根目录 del:删除文件 exit:退出dos命令行 1.dir:列出当前目录下的文件以及文件夹 2.md: 创建目录 …

Spring实例化源码解析之Custom Events上集(八)

Events使用介绍 在ApplicationContext中&#xff0c;事件处理通过ApplicationEvent类和ApplicationListener接口提供。如果将实现ApplicationListener接口的bean部署到上下文中&#xff0c;每当一个ApplicationEvent被发布到ApplicationContext时&#xff0c;该bean将被通知。…

Android Studio版本升级后的问题 gradle降级、jdk升级

Cannot use TaskAction annotation on method IncrementalTask.taskAction$gradle_core() because interface org.gradle.api.tasks.incremental.IncrementalTaskInputs is not a valid parameter to an action method. 修改下面两处地方分别为7.0.3、7.3.3Android Gradle plu…

Nginx的跨域问题解决

同源策略 浏览器的同源策略&#xff1a;是一种约定&#xff0c;是浏览器最核心也是最基本的安全功能&#xff0c;如果浏览器少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。 同源: 协议、域名(IP)、端口相同即为同源 跨域问题 有两台服务器分别为A,B,如果从…

网络安全(自学黑客技术)——黑客学习方法

如果你想自学网络安全&#xff0c;首先你必须了解什么是网络安全&#xff01;&#xff0c;什么是黑客&#xff01;&#xff01; 1.无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性&#xff0c;例如 Web 安全技术&#xff0c;既有 Web 渗透2.也有 Web 防…

MySQL运维—从零到放弃

1. 日志 1.1 错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时&#xff0c;建议首先查看此日志。 该日志是默认开启的…

JVM完整图文学习笔记 (含拓展知识广度学习) 第三章: 类加载与字节码技术

目录 编译期处理——语法糖 默认构造器 自动拆装箱 泛型集合取值 可变参数 foreach循环 switch 字符串 switch 枚举 枚举类 try-with-resources 方法重写时的桥接方法 匿名内部类 类加载阶段&#xff08;重点&#xff01;&#xff09; 加载 链接 &#xff08;1&#xff09;验证…

pip 清华镜像

python -m pip install --upgrade pip pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple pypi | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror

大数据—数据透析表常见使用(手把手详解)

我的个人主页&#xff1a;☆光之梦☆_C语言基础语法&#xff08;超详细&#xff09;,【java入门】语法总结-CSDN博客 创作不易&#xff0c;如果能帮到你就好 注&#xff1a;你的 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 是对博主最大的支持与鼓励喔 目录 一、创建数据透…

CentOS系统/root根目录扩容(扩展逻辑卷)

具体操作步骤 1、查看本机磁盘环境挂载情况 2、添加磁盘分区 3、开始扩容 4、同步到文件系统 1、查看本机磁盘环境挂载情况 [rooticon ~]# df -lh 可以看到/dev/mapper/centos-root 路径下容量为50G&#xff0c;我们要给这个路径下的容量扩容&#xff1a;[rooticon ~]# lsblk…

el-table 边框颜色修改 简单有效!

废话不多说&#xff0c;直接上图 &#xff08;1&#xff09;修改前的图如下&#xff1a; 以上是elementUI原组件自带的样式 &#xff08;2&#xff09;下面是修改后的边框图如下&#xff1a; 源码如下&#xff1a; <el-table :data"jctableData" border size…

mysql 逻辑备份 bin-log日志恢复

一、逻辑备份 逻辑备份&#xff1a;备份的是建表&#xff0c;建库&#xff0c;插入数据等操作所执行SQL语句&#xff0c;适用于中小型数据库&#xff0c;效率相对较低&#xff0c;提供三种级别的备份&#xff0c;表级&#xff0c;库级和全库级。 本质&#xff1a;导出的是SQL语…

基于Springboot实现疫情网课管理系统项目【项目源码+论文说明】分享

基于Springboot实现疫情网课管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于疫情网课管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了疫情…

麻省理工学院与Meta AI共同开发StreamingLLM框架,实现语言模型无限处理长度

&#x1f989; AI新闻 &#x1f680; 麻省理工学院与Meta AI共同开发StreamingLLM框架&#xff0c;实现语言模型无限处理长度 摘要&#xff1a;麻省理工学院与Meta AI的研究人员联合研发了一款名为StreamingLLM的框架&#xff0c;解决了大语言模型在RAM与泛化问题上的挑战&am…

一用就会的手机配音软件,效果好到你震惊~

作为当今社交媒体时代的一员&#xff0c;我们经常需要在各种场合中使用配音软件&#xff0c;无论是自制视频内容还是进行个人创作&#xff0c;一款好用的配音软件真的很重要。所以经过小编这几天的努力&#xff0c;终于选出了一款备受好评的免费配音软件&#xff0c;不仅功能强…