开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在bootsrap中的导航栏和正文顶部添加一个层以保持可滚动

在Bootstrap中，可以通过添加一个层来保持导航栏和正文顶部的可滚动性。为了实现这个效果，可以使用Bootstrap提供的CSS类和一些自定义的CSS样式。

以下是一个实现该效果的示例代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Scrollable Navbar</title>
    <style>
        .scrollable {
            overflow-y: auto;
            max-height: calc(100vh - 150px); /* 根据需要设置合适的高度 */
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Logo</a>
        <!-- 导航栏内容 -->
    </nav>

    <div class="container">
        <div class="scrollable">
            <!-- 正文内容 -->
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

在上述示例中，我们在容器元素中添加了一个自定义的CSS类.scrollable，并设置它的overflow-y为auto，这样当内容超出容器高度时，就会显示垂直滚动条。我们还设置了.scrollable的max-height属性来限制滚动区域的最大高度，以保持页面整体的布局美观。

需要注意的是，示例中使用了Bootstrap的CSS和JavaScript库，所以需要引入对应的CDN链接。另外，根据实际需要，可以根据示例代码的注释部分自定义导航栏和正文的内容。

至于推荐的腾讯云相关产品和产品介绍链接地址，由于要求不提及具体品牌商，这里无法提供相关信息。如果有相关需求，可以访问腾讯云官方网站进行查找。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端性能优化之防抖与节流，大幅度降低你的事件处理性能

看到这个标题就懵了，你会有以下几个问题：什么是防抖？什么是节流？如何使用防抖？如何使用节流？什么时候需要用到防抖和节流？为什么要用防抖和节流？那我们就围绕这几个问题来讲一讲防抖与节流的两个概念和简单应用吧~ 我会在正文中给大家逐个解答问题

02

Bootstrap实战 - 单页面网站

单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。

waypoint_使用jQuery Waypoint创建粘性导航标题

在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。

03

如何使用CSS中的固定定位属性？

CSS中的固定定位属性（position: fixed）是一种常用的布局技术，可以将元素固定在浏览器窗口的特定位置，不随页面滚动而变动。这个属性在开发各种网页和应用程序时非常有用。本文将介绍固定定位属性的使用方法，并提供具体的代码示例。

01

微信小程序自定义顶部导航栏并适配不同机型

在小程序中，顶部导航栏是一个非常重要的组件，它不仅可以方便用户进行页面切换，还可以提高用户体验。默认情况下，小程序的顶部导航栏是由系统自动生成的，我们只能修改一些基本的样式，如背景色、文字颜色等。但是，如果想要实现更加复杂的样式，如自定义图标、自定义背景等，而且在不同的手机屏幕上，导航栏的高度和样式也可能有所不同。因此，我们需要自定义顶部导航栏，以满足我们的设计需求和用户体验。

08

Flutter中的AppBar、TabBar和TabController——顶部切换栏是如何实现的

实际上，AppBar 这个组件有许多的属性，我们通过这些属性，可以用来定义顶部导航栏的各种样式。下面我将为你一一说明这些属性的作用：

02

vue+element锚点跳转+自动感应导航栏

最近来个需求，要做一个页面，每个模块都是百分百全屏且右侧有个导航栏能自动感应在哪个模块,点击也能直接跳转到该锚点。

05

ELEMENT顶部导航栏固定

使用addEventListener() 方法，进行事件监听，用于向指定元素添加事件句柄。

03

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

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

vue系列教程之微商城项目|分类

本文需要实现的页面如下，点击左侧导航栏按钮，右侧自动滑动到对应位置。当滑动右侧内容，左侧导航栏也要做出相应变动。

01

HTML网页引用公共的头部和底部（亲测有效的三种方法）

注意：方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）

01

JS实现导航栏下滑悬浮透明置顶

如果仅仅想把导航栏固定，添加以下属性即可： style="position: sticky;" 注：前提是你已经写好了导航栏。如果想将导航栏下滑悬浮透明，请参照如下方式：给 header盒子(整个导航的盒子)添加 id="headerTop" 并添加以下css样式： #headerTop{ /*使导航栏固定在顶部*/ position: fixed; top:0; left: 0px; z-index: 1000; /*一开始就不给导航栏设置背景色*/

01

答应大家的建站教程！

先给大家看一下网站封面，个人是非常喜欢的，记得高中下课后的娱乐项目之一就是，趴在桌子下面，用手机偷偷看灌篮高手，这个是真的好看，喜欢打篮球的哥们应该都看过这个动漫。

01

zblog主题模板，水墨年华(filmslee)

这款主题其实就是flmlee主题的升级版，但是在原有的基础上新增了需要功能及模块，使其更丰满，有价值，而且这款主题是为了VIP超级会员准备的（实力宠粉.gif），价格虽然不高，但是制作主题的心血却不必任何一款主题少，前前后后修改了大概两周左右吧，因为工作原因，时间过于零碎，再加上最近天气温度较高，有些心浮气躁，所以慢了些，哈哈，一起看看这款主题吧！

01

Anroid Wear OS 手表应用开发 - UI

智能手表相对手机来说，由于使用场景不同，且屏幕较小，所以应用的设计、交互和手机是有些区别的。相对来说，布局会更简洁，更多地使用滑动手势进行操作。

03

iOS 11 更大的导航（官方翻译版）

导航栏导航栏出现在应用程序屏幕顶部的状态栏下方，并可以通过一系列分层屏幕进行导航。当显示新屏幕时，通常标有前一屏幕标题的后退按钮出现在栏的左侧。有时，导航栏的右侧包含一个控件，如编辑或完成按钮，用于

03

[ISUX译]iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

文章索引 4.1.1 状态栏 4.1.2 导航栏 4.1.3 工具栏 4.1.4 工具栏与导航标准按钮 4.1.5 标签栏 4.1.6 标签栏标准图标 4.1.7 搜索栏 4.1.8 范围栏 4.2.1 活动 4.2.2 活动视图控制器 4.2.3 集合视图 4.2.4 容器视图控制器 4.2.5 图片视图 4.2.6 地图视图 4.2.7 页面视图控制器 4.2.8 浮出层 4.2.9 滚动视图(Scroll View) 4.2.10 分栏视图控制器 4.2.11 表格视图 4.2.12 文本视图 4.2

05

导航栏滚动吸顶并自动高亮和点击跳转锚点

在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。点击时则会滑动至其内容所在位置。具体效果为下图样式。

05

css3新属性position: sticky 一分钟实现导航栏悬停功能

想必很多前端小伙伴经常会在开发中遇到这样一个需求，就是在下划时，导航栏悬停在屏幕最上方，例如咱们的csdn：

01

vue系列教程之微商城项目|商品详情

3.监听商品列表页的商品点击事件，当点击后携带数据跳转到商品详情页(上一文中已完成)

02

JS 吸顶导航，告别“回到顶部”

当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如

07

微信小程序-自定义菜单导航（实现楼梯效果）

在开发页面时，往往需要实现，点击页面的导航菜单页面滚动到相应位置，滚动页面实现菜单选项的高亮。在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。

02

「大众点评点餐」小程序开发经验 03：事件联动

李超，美团点评前端开发工程师，2 年 web 开发经验，现在是美团点评点餐团队的一员。

04

WordPress免费主题：Document，让阅读变得更加方便

😁作为一个程序员，在日常的工作、生活、学习的过程中基本都有很多需要做笔记的地方；做笔记的主要目的之一是为了“温故而知新”，另一个则是为了在下一次遇到的时候，不需要再次耗费精力去找解决方法；回顾自己之前写的那个主题，不管是写还是查都不怎么方便，最终下定决心重写一个主题；以 “方便记、方便查、简约”作为设计核心；开源地址 Github：https://github.com/friend-nicen/theme-document Gitee：https://gitee.com/friend-nicen/the

03

Vue:Vue中的导航浮顶

前言这段时间忙着找工作写毕业设计，简书好久没更新了。毕业设就是用Vue重构了学院官网，大致功能都完成了，完全实现了前后端分离。MOCK服务器也是在webpack基础上搭建的，有空再写篇文章介绍一下，

09

jQuery笔记(3)

jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历

01

【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ;

05

2019年最实用的导航栏设计实践和案例分析全解

我们都知道，用户的浏览习惯是从左到右，从上到下。所以一个网站的导航栏至关重要，用户进入你的网站，首先查找的信息就是从导航栏开始。一个用户体验好的导航栏，会增加网站的转化率和回访率。反之，用户会离开你的网站，寻找替代品。

03

Z-blogPHP《小清新》至简至美个人博客主题模板，自适应加SEO优化

关于这个模板说多了都是故事，期初ZB官方发布投标公告，征集ZBP新版默认主题，当时正在制作2020年新款主题的时候，收到官方的公告。于是乎开始搁置2020新款主题，投入到默认主题的制作过程中，结果，公司服务器到期，涉及迁移相关网站数据，服务器购买等等一系列的工作任务中，不得以默认主题的招标也搁置了。11月中旬才重新制作，然后把首页截图给官方人员看了，官方回复不需要文章缩略图，作者信息也不要，然后我就放弃投标了，让他们自己折腾吧。。。

02

Human Interface Guidelines —— 导航栏（Navigation Bars）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

探索 Flutter 中的 NavigationRail：使用详解

在 Flutter 中，NavigationRail 是一个垂直的导航栏组件，用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备，如平板电脑和桌面应用程序。NavigationRail 提供了一种直观的方式来浏览应用程序的不同部分，并允许用户轻松地切换页面或执行导航操作。

01

神奇的position:sticky

position:sticky定义， eg:CSS中position属性介绍(新增sticky)

02

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

.img-responsive：直接为图片添加该样式，可以实现响应式图片。 .center-block：图片居中样式，而不能使用text-center样式。图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

02

zblog主题模板，水墨年华(filmslee)

这款主题其实就是flmlee主题的升级版，但是在原有的基础上新增了需要功能及模块，使其更丰满，有价值，价格虽然不高，但是制作主题的心血却不必任何一款主题少，前前后后修改了大概两周左右吧，因为工作原因，时间过于零碎，再加上最近天气温度较高，有些心浮气躁，所以慢了些，哈哈，一起看看这款主题吧！

01

vue博客实战---博客首页开发

上一篇文章讲完了项目的搭建。本篇开始就正式博客网站的开发了，本篇文章实现博客首页的开发。博客网站的架构如下：

02

Axure实战06:创建一个AppleSymbol图标库网站

在本章中，你将学会如何使用Axure中继器和内联框架创建一个AppleSymbol图标库网站。

02

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部

05

zblog主题模板，水墨年华(filmslee)

这款主题其实就是flmlee主题的升级版，但是在原有的基础上新增了需要功能及模块，使其更丰满，有价值，而且这款主题是为了VIP超级会员准备的（实力宠粉.gif），价格虽然不高，但是制作主题的心血却不必任何一款主题少，前前后后修改了大概两周左右吧，因为工作原因，时间过于零碎，再加上最近天气温度较高，有些心浮气躁，所以慢了些，哈哈，一起看看这款主题吧！

01

一个JS效果竟然要研究一天，我是不是不适合做前端？

前言今天这篇文章的标题，显然是要搞事情。一个JS交互效果，居然花费了一天的宝贵时间才研究出来，我是不是不太适合做前端？别急，搬好小板凳，正文从这开始～本来今天下班回来感觉有点累，想着今天就别学了吧，正好看见停播了好久的《极限挑战》在网上放出了最新的一期。但是，今天发生在公司的一件小事儿，在我心里产生了不小的波澜，正好拿这个话题跟同行们聊聊..... 今天早晨我按时去了公司，坐在我的工位上，习惯性地点开了编辑器SublimeText（我宠幸了它三年之久～），一天的编码工作正式开始。我的大脑高速运转

最新iOS设计规范三｜3大界面要素：栏(Bars)

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。

01

zblog企业展示型主题模板赢天下（Winlee）助力小微企业成长

嗨，我又来了，话说可以简单聊聊为什么会出这款主题，端午节假日在家，孩子午睡时间自己更新完主题之后网上冲浪，偶然间看到很多工作室和小微企业的网站，有些真的惨目认读，杂乱无章，瞬间灵感迸发，赢天下主题模板也就应运而生（怎么感觉跟写小说是的呢），说人话就是弄了一款小微企业主题，助力企业成长，以最少的资金获得最好的服务，毕竟现在的企业网站建设都是3-5K起步，万八千的也不少，更何况还有几千万搭建商城结果还运行不了的，悲伤的表情.gif。

04

商品添加到购物车动画getBoundingClientRect获取元素位置

3. IE67的left、top会少2px,并且没有width、height属性。

02

小程序自定义单页面、全局导航栏

产品说小程序返回到首页不太方便，想添加返回首页按钮，UI说导航栏能不能设置背景图片，因为那样设计挺好看的。

02

Docsify程序员的文档利器

今天我们继续介绍一款文档软件，它堪称程序员文档利器。是Docute的大哥。也是专注纯净的文档构建。对于SEO并不擅长，但是它简单高效的特点斩获了大批的用户，我也是其忠实的拥护者。

05

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/

02

使用 position:sticky 实现粘性布局

如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ position: inherit; position: initial; position: unset; } 没了吗？偶然发

04

图片素材类Web原型制作分享-Pexels

Pexels是一个高清图片下载服务站点，为用户提供海量共享图片素材的网站，每周都会定量更新。

03

css中绝对定位_绝对定位和相对定位怎么用

bottom属性描述时，以首屏页面左下角为参考点如果浏览器不动，滚动条动的时候，红色盒子跟随页面动，红绿盒子间距不变。

03

全屏、沉浸式、fitSystemWindow使用及原理分析：全方位控制“沉浸式”的实现

状态栏与导航栏属于SystemUi的管理范畴，虽然界面的UI会受到SystemUi的影响，但是，APP并没有直接绘制SystemUI的权限与必要。APP端之所以能够更改状态栏的颜色、导航栏的颜色，其实还是操作自己的View更改UI。可以这么理解：状态栏与导航栏拥有自己独立的窗口，而且这两个窗口的优先级较高，会悬浮在所有窗口之上，可以把系统自身的状态栏与导航栏看做全透明的，之所有会有背景颜色，是因为下层显示界面在被覆盖的区域添加了颜色，之后，通过SurfaceFlinger的图层混合，好像是状态栏、导航栏自身有了背景色。看一下一个普通的Activity展示的时候，所对应的Surface（或者说Window也可以）。

04

固定导航栏css样式代码

其实很简单，在css里给导航栏所在的div设置四个属性，position设置为fixed，top和left设置为0px，然后把z-index的值设置成最高，即可实现。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭