首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap中滚动条上的粘性边栏

是指在网页滚动时,边栏会固定在页面的一侧,始终可见,不随滚动而消失。这种效果可以提供更好的用户体验,使用户能够快速访问边栏中的导航、菜单或其他重要内容。

优势:

  1. 提升用户体验:粘性边栏使导航或其他重要内容始终可见,用户无需滚动页面即可快速访问,提高了用户的操作效率和体验。
  2. 节省空间:由于粘性边栏固定在页面一侧,不占用页面的主要内容区域,可以节省页面空间,使页面更加简洁。
  3. 强调重要内容:粘性边栏可以用于展示重要的导航、菜单或其他信息,使其始终可见,提醒用户重要操作或内容。

应用场景:

  1. 博客或新闻网站:可以将常用的分类、标签、热门文章等放置在粘性边栏中,方便用户快速浏览和访问。
  2. 电子商务网站:可以将商品分类、购物车、用户登录等放置在粘性边栏中,提供便捷的购物体验。
  3. 企业官网:可以将公司简介、联系方式、快速链接等放置在粘性边栏中,方便用户获取相关信息。

推荐的腾讯云相关产品: 腾讯云提供了一系列的云计算产品,以下是一些与网页开发相关的产品:

  1. 云服务器(CVM):提供可扩展的虚拟服务器,可用于部署网站和应用程序。
  2. 云数据库 MySQL 版(CDB):提供高性能、可扩展的关系型数据库服务,适用于存储网站的数据。
  3. 对象存储(COS):提供安全、可靠的对象存储服务,适用于存储网站的静态资源,如图片、视频等。
  4. 腾讯云 CDN:提供全球加速服务,可加速网站的内容分发,提高用户访问速度和体验。

更多腾讯云产品信息和介绍,您可以访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从头学前端-CSS基础04

定位为什么需要定位> 定位可以让盒子在指定盒子内自由移动位置,并压住其他盒子,而浮动只能让盒子排在一行;定位组成>定位是定位模式+偏移> 定位模式用于指定一个元素在文档定位方式,使用CSS属性...position;值包括static、relative,absolute,fixed> 偏移决定了改元素最终位置;CSS中有top left right bottom四个属性;配合定位属性position...> 与父元素没有任何关系> 不随着滚动条滚动而滚动> 不占用标准流位置,是一种特殊绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位混合> 已可视窗口为参考点> 占有标准流位置...;一行列模块经常为浮动布局,先大小,后位置先结构,后样式。...html结构导航实际开发,不会直接使用连接a,而是使用li包含链接做法> 直接使用a,搜索引擎会辨别为关键字堆砌,有降权风险

60940

Bootstrap实战 - 单页面网站

二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap JavaScript 插件,根据滚动条所处位置自动更新选中导航。...滚动监听一般与导航配合使用,这里先引用了带有二级导航导航。...id="nav-menu",滚动监听效果是由样式为 scrollspy(这里可以是任意值,只是做个示例)载体在其容器滚动条变化时,随着载体内容在视觉变化,其 id 对应导航做出相应反应...[定制 Bootstrap] 之前若想改变 Bootstrap CSS 默认属性的话,要么在源码找出来修改,要么在自己 CSS 写样式覆盖它,例如:.navbar-default { background-color...在定制页面,CSS 样式不仅可以筛选,还可以改变默认属性,例如:改变导航背景颜色,直接在属性 @navbar-default-bg 下面修改即可。

8.8K104

CSS笔记(14)

定位则是可以让盒子自由在某个盒子内移动位置或者固定屏幕某个位置,并且可以压住其他盒子. 定位 将盒子定在某一个位置,所以定位也是在摆盒子,按照定位方式移动盒子....定位=定位模式+偏移. 定位模式用于指定一个元素在文档定位方式,偏移则决定了该元素最终位置....跟父元素没有任何关系 不随滚动条滚动 固定定位不再占有原先位置 固定定位也是脱标的,其实固定定位也可以看做是一种特殊绝对定位. 固定定位小技巧:固定在版心右侧位置....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位和固定定位混合 语法: 选择器 { position : sticky ; } 以浏览器可视窗口为参照点移动像素(固定定位特点...案例 接下来,我们做一个淘宝轮播图案例,但是图片切换效果还要等到学了JS才能实现,我们现在只能先做一个简略版(一张图片左右两侧有小箭头,可以切换图片,下边有一条小导航,也可以切换图片)

56610

Dash应用页面整体布局技巧

示例2:粘性页首+内容布局 在前面的示例1,若页面内容区域较长,页首部分会随着用户滚动页面而被滚上去,如果我们希望应用页首部分一直紧贴页面顶端,就像下面的示例2所示: 最简单方式就是在前面示例...1基础,将页首部分套在fac固钉组件AntdAffix(文档地址:https://fac.feffery.tech/AntdAffix ),并设置offsetTop=0即可,相当简单: 本示例完整代码见文章开头附件地址...示例3:固定侧边菜单+粘性页首+内容布局 在前面的两个例子,我们页面充当导航作用只有位于页首右侧一级导航菜单,如果我们应用功能进一步复杂起来,需要在当前一级菜单对应页面下再设立二级导航菜单...2基础,将下方内容区域改造成基于fac网格系统新布局即可: 其中涉及到固定侧边菜单部分,重点在于为菜单容器基于calc()动态计算高度值,即扣除页首高度之后剩余部分,并通过overflowY...属性开启竖向滚动条,而最关键固定效果则同样是基于AntdAffix实现,只不过这里offsetTop需要考虑页首部分高度,所以设置为64: 本示例完整代码见文章开头附件地址app3.py。

37920

css粘性定位sticky

前言 发现很多博客侧边可以跟随滚动条移动到底部又可以继续翻看侧边,F12看了下代码,仅仅是用了一个sticky定位,下边我简单说一下sticky定位 内容简介: 讲 sticky 定位之前,我先说一下...position 其他定位 absolute 生成绝对定位元素,相对于 static 定位以外第一个父元素进行定位。...static 默认值,没有定位,元素出现在正常文档流(忽略 top, bottom, left, right 或者z-index 声明)。...inherit规定应该从父元素继承 position 属性值。 sticky使用 粘性定位可以被认为是相对定位和固定定位混合。...#sticky-nav { position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 粘性定位为什么不起作用

1.1K10

如何使用 CSS 设置和自定义水平和垂直滚动条

在本节,我们将按照以下步骤创建一个可滚动侧边导航:a)创建带有导航项目的导航b)将导航样式设置为侧边c)将侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....body高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航样式设置为侧边并调整body底部距。...让我们继续下一节,我们将讨论如何设置滚动条样式。自定义滚动条样式您希望为网站滚动条设置样式原因之一是为了在整个网页实现颜色协调。您可能希望将在网站上使用颜色数量保持在一组最小值。...在本节,我们将分别为垂直滚动条(侧边滚动)和水平滚动条(flexbox滚动)设置样式。样式垂直滚动条(侧边滚动)我们将在侧边(垂直)滚动条设置以下样式。...一次性样式所有滚动条。在大多数情况下,您可能希望在整个网站所有垂直和水平滚动条保持一致样式。

56400

clientHeight、scrollHeight、offsetHeight和scrollTop之间区别

屏幕可见区域高(内容可视高度,不包括边框,距或滚动条):document.body.clientHeight 正文内容高(整个元素高度,包括带滚动条隐蔽地方):document.body.scrollHeight...三、我么怎么用clientHeight和scrollHeight clientHeight在页面上返回内容可视高度(不包括边框,距或滚动条),结果显示上图h3; scrollHeight返回整个元素高度...(包括带滚动条隐蔽地方),它带着滚动条呢,但是一般会用到滚动条地步么,好吧,我没用到过,也许我写代码还不够多,结果显示上图h4; 四、关于innerheight和outerheight 这俩我也不咋用过...,但是这看名字就基本知道啥区别啥意思了感觉 innerHeight,inner,inner,里面的里面的,那就是不包括菜单、工具以及滚动条高度只看里面的外面的忽视。...为匹配元素集合获取第一个元素的当前计算高度值,包括padding,但是不包括border,结果显示上图h5。

95720

BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码

这2个class是直接在body标签下建立一个div标签,class等于这2个一个。 然后其他内容全部写在这个div标签即可! 例如: <!...也就是说,container-fluid这个是和页面两是没有间隔。 而container是有一定间隔,而且左右两间隔相等。...普通列表样式:首先是前面有一定空隙,不是和文本同间隔。 另外就是有小圆点,当然,你可以改这个符号。 在BootStrap,我们只需要在ul加一个class就可以解决这个问题。...在这里,我发现BootStrap4不支持ul在一行显示,也就是添加class=”list-inline”是无效。 所以,我在这里就改用bootstrap3了。...当屏幕宽度大于768px时,表格滚动条自然消失。 也就是在table标签外再创一个div标签,divclass设置为table-responsive即可。

3.3K10

博客园文章编辑器5.0版本发布(markdown版)

调研 说实话,我确实低估了开发这个东西难度 本打算到github随便拉一个来, 嵌到nwjs里去就可以了, 然而看了几个高分项目,都不合我意。...(不过,说真心话还是要感谢这些项目,我写这个工具参考了很多这些开源项目的源码) 我觉得这个项目最主要难点是: 找一个合适编辑器 编辑窗口与预览窗口滚动条同步 和博客园官网通信通道打通 好在这些难点我都克服了...现在你看到东西,就是这一阵子断断续续努力成果 功能 这里罗列是所有的我觉得重要功能 两布局,左边编写markdown内容,右边实时预览; 左右两滚动条同步滚动 允许用户拖拽调整左右两宽度...,支持分页) 修改文章(你博客园内所有的历史随笔文章,都可以用此工具编辑修改) 新增文章(从无到有撰写一篇新随笔文章,默认保存为草稿) 截图工具截图后直接黏贴到编辑器(图片保存在博客园服务器)...://gitee.com/xland/cnblogs/releases 支持 强烈希望大家能给个star; 这让我知道你在用; 这让我有动力继续做一些对大家有用东西; 关键源码 第一段代码是用于控制滚动条同步滚动

1.5K20

DOM 和 BOM 各种宽高属性

先区分一下 window 对象和 document 对象: window 对象表示浏览器打开窗口,而 document 对象表示整个 html 文档,它是 window 对象一部分。...不包括开发者工具、顶部、侧边滚动条、边框等不由 HTML 控制部分 window.outerHeight/window.outerWidth: 返回表示窗口外部高度/宽度数字。...包括开发者工具、顶部、侧边滚动条、边框等不由 HTML 控制部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height: 返回表示屏幕宽度...image.png 例如,上图中红框是固定屏幕可视区,而网页视为可以上下拖动文档,当滚动条下拉时候,实际是文档向上拖动,而这个拖动距离就是 element.scrollTop 2.4 返回对象系列...对于一个 dom 元素,它 getBoundingClientRect() 方法返回是该元素对应矩形对象,通过 top,bottom,left,right 可以分别获得该对象各相对于窗口上边或者左边距离

1.9K10

javascriptoffsetWidth、clientWidth、innerWidth及相关属性方法

关于jsoffsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法用法和含义。...document.documentElement.clientWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单、工具滚动条) * document.documentElement.clientHeight...浏览器窗口可视区高度(不包括浏览器控制台、菜单、工具滚动条) * * document.documentElement.offsetHeight 获取整个文档高度(包含body...* left: 元素最左边(不包括border)到可视区最左边距离 * right: 元素最右边(包括border)到可视区最左边距离 * top: 元素顶(...* */ 上面属性,关于 window.innerWidth 和 window.innerHeight, 我自己测试结果值是包含滚动条,但网上教程和相关文档都说不包括滚动条

85720

【交互探讨】无限滚动还是分页展示,这是个问题!

老生常谈,没有明确赢家。图片来源:Yogev Ahuvia 有时地址URL在滚动时会发生变化,但更多情况下不会发生变化。因此,如果我们想稍后继续浏览,我们就需要从头开始。...就像我们习惯于使用粘性头部一样,我们可以集成一个页脚显示:一个小助手,它会保持在右下角,并在需要时显示页脚,而页面的其余部分使用无限滚动。...滚动时,页面的 URL 会发生变化,并且页码会在吸底底部更新。用户还可以在分页下拉菜单中导航到特定页面。当然,折叠面板也可以在点击时打开页脚。...总结 有了所有这些技术,我们解决了无限滚动许多问题。我们现在可以更好地控制滚动条显示项目数量,并且可以随时停止浏览,稍后继续。我们可以很容易地发现“旧”和“新”部分。...考虑使用滚动条范围间隔。 考虑允许用户对感兴趣领域标记或加入书签。 确保可访问性和性能是实现过程主要考虑因素。

3.1K20

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 介绍和使用方法

mCustomScrollbar 样式 没有内容当然谈不出现这个插件效果了。...jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义。...你可以在这个文件定义你,当然你可以在其他 CSS 文件定义,要注意是,你要用 CSS 顺序,其中优先级关系来覆盖这个文件定义。...:Integer }:设置点击滚动按钮时候每次滚动数值 像素单位 默认 40像素 advanced:{ updateOnBrowserResize:Boolean }:根据百分比为自适应布局 调整浏览器滚动条大小...更加进阶使用:修改浏览器滚动条 单单是修改某个内容区域已经无法满足我们需求了,我们还想修改浏览器应该怎么办?

13.9K30

BootStrap】图片样式、辅助类样式和CSS组件 -附源码

导航 导航有一个不同,他不是写在container包含层里面了,而是那个div上面! .navbar:导航基类,用于元素。....navbar-brand:设置品牌图标样式 .collapse是折叠导航样式基类。 .navbar-collapse是折叠导航样式。 .nav是导航链接基类。....navbar-btn:对于不在元素,实现垂直对齐。 .navbar-text:对于导航普通文本有了行距和颜色,通常用于元素。...需要为设置padding-bottom:70px; .navbar-static-top:导航静止在顶部,用于元素。会随着滚动条移动而消失。...好了,然后直接上完整源码: 完整源码链接: https://github.com/chenhaoxiang/BootStrap/tree/master/day3 像学后台,把这个BootStrap

2.4K20

CSS固定定位与粘性定位4大企业级案例

前面两篇文章为大家详细讲解了相对定位与绝对定位应用场景和案例。如果想了解可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位应用场景和案例。...fixed 固定定位 相对于浏览器窗口进行位置调整 sticky 粘性定位 是基于用户滚动位置来定位。 固定定位 相对于浏览器窗口进行定位,其它与绝对定位特性一致。...常见应用有:楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动高度>元素与浏览器高度时,会以fixed固定定位显示...--左侧边--> 4、吸顶盒导航和常见左右吸附效果(粘性定位) 由于粘性定义目前只有火狐和Safari浏览器支持,但是这种效果在实际企业开发必用。

1.5K30
领券