完美解决Bootstrap4 导航栏 fixed-top 后，锚点定位时遮挡问题

最新推荐文章于 2022-03-02 22:28:53 发布
转载 最新推荐文章于 2022-03-02 22:28:53 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/santiego/p/10361494.html
文章标签：

#php

本文介绍了一种使用HTML的onhashchange事件和jQuery的scrollTop方法来实现页面滚动到特定位置的技术。通过监听URL哈希值的变化，可以自动调整页面滚动位置，使其在导航链接点击后回到导航栏高度的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用锚点改变事件\(onhashchange\)，使用jQuery的\(scrollTop\)向前滚回导航栏的高度（比如我的100个像素）
HTML:

<body onhashchange="fix_the_nav();">
</body>

js:

function fix_the_nav() {
    if(window.location.hash){
            var target = $(location.hash);
            $("body,html").scrollTop(target.offset().top-100); // my nav size is 100px
    }
}

Done.

我的Gist

转载于:https://www.cnblogs.com/santiego/p/10361494.html

前端领域：Bootstrap的导航栏固定效果
小白菜的博客
05-23 614
本文旨在深入解析Bootstrap框架中导航栏固定效果的实现原理和应用技巧。我们将涵盖从基础概念到高级用法的完整知识体系，包括CSS定位机制、Bootstrap组件结构、JavaScript交互逻辑等核心内容。文章将从基础概念开始，逐步深入到实现原理、源码分析和实际应用。最后将讨论性能优化和常见问题解决方案。固定定位(Fixed Positioning)：元素相对于浏览器窗口固定位置，不随页面滚动而移动粘性定位(Sticky Positioning)：元素在滚动到特定位置时变为固定定位。
Bootstrap - Navbar (响应式导航栏)
wust_cyl的博客
08-02 9835
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 响应式的导航栏 上面代码就是一个简单的响应式导航栏。什么是响应式了？在浏览器窗口大小变化的情况下，依然保持美观（...
Bootstrap navbar fixed-top 导航栏 遮盖下方元素 解决
热门推荐
wuyujin1997的博客
05-27 1万+
resolve 两种解决方式： 向<body>元素添加样式style="padding-top: 50px;"，顶部填充的实际大小可自己调整。 向div.nav-bar.fixed-top元素添加样式style="position: sticky;"，实际是修改该导航栏元素的定位属性position， 从原本的fixed到sticky。 两种方法各有优劣。 Bootstrap 4.1...
Bootstrap 4：如何使顶部固定的Navbar保持在容器中而不拉伸？
cumi7754的博客
08-19 882
There are many ways to make a fixed navbar stay inside a parent's div container. We'll go over the most straightforward one here. 有很多方法可以使固定的导航栏停留在父级的div容器中。 我们将在这里介绍最简单的方法。 Imagine you have the foll...
bootstrap用了fixed-top后，下面内容上提的问题
我不想说
09-30 1955
bootstrap用了fixed-top后，下面的div会到顶部，解决方法：body{ padding-top:70px;}
navbar fixed top.css,Bootstrap个人博客给nav设置navbar-fixed-top定位后导航栏遮盖内容完美解决方案！...
weixin_35970228的博客
08-04 889
这也是我在使用Bootstrap3开发完美解决方案一：使用两个导航占位大致意思就是给页面设置两个导航nav一个是空的导航栏一个则是设置navbar-fixed-top的导航栏..........完美解决方案二：使用JS使body永远根据nav高度进行padding-top(推荐)大致意思就是使body通过不同分辨率屏幕下nav的搞定设定padding-top响应的值代码为：..........va...
bootstrap-table-fixed-columns.js
08-16
如有使用疑问，联系本人，如有使用疑问，
bootstrap4实现侧边导航栏带隐藏按钮
12-09
在Bootstrap 4中，实现带有隐藏按钮的侧边导航栏是一项常见的需求，尤其在创建现代网页设计时。这样的导航栏可以节省空间，提升用户体验，特别是在移动设备上。 首先，要创建一个侧边导航栏，我们需要引入Bootstrap...
优化bootstrap-table-fixed-columns实现冻结列及排序列宽合并行功能
为了解决这个问题，需要修改bootstrap-table-fixed-columns.js插件的代码，确保在进行排序操作时能够同时更新固定列和滚动列的内容。这可能涉及到监听排序事件并在事件触发时同步更新固定列的内容。 2. 列宽错位...
bootstrap侧边导航栏
07-25
接下来，我们可以创建一个`.navbar`类的容器，设置为固定定位（`fixed-top` 或 `fixed-left`），并添加`.navbar-dark`和`.bg-dark`类以获得深色背景和文本。在`.navbar-nav`内，使用`.nav-item`和`.nav-link`来创建...
Bootstrap左侧下拉三级菜单导航
11-19
Bootstrap左侧下拉三级菜单导航
BootStrap4工具类之定位
爱喝水的qdy的博客
12-04 2217
目录官方地址其他文档地址通用属性固定在顶部固定在底部sticky置顶整体代码 官方地址 https://getbootstrap.com/docs/4.4/utilities/position/ 其他文档地址 https://getbootstrap.net https://getbootstrap.net/docs/utilities/position/ http://bs4.vx.li...
bootstrap中nav-fixed-top和nav-static-top的区别
weixin_33877885的博客
06-02 653
当页面内容很多，要滚动下滑时，nav-fixed-top：导航条会挡住内容；nav-static-top不会。 转载于:https://www.cnblogs.com/jia-hui/p/5554330.html
bootsrap解决悬浮层（悬浮header、footer）会遮挡住内容的方法
QC班长的博客
07-21 8607
固定Footer Bootstrap框架提供了两种固定导航条的方式：    ☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部    ☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可： 　 实现原理： 实现原理很简单，就是在navbar-
Bootstrap学习笔记4
qq_52476758的博客
03-02 1857
1. 下拉菜单与滚动监视器1.1 下拉菜单1.1.1 属性声明式方法1.1.2 JavaScript触发方法1.2 滚动监视器1.2.1 滚动监控器的设计1.2.2 声明属性触发滚动监控1.2.3 在body中加监控1.2.4 JavaScript方法触发滚动监控器2. 选项卡、提示框和弹出框2.1 选项卡-Tabs2.1.1 选项卡的结构2.1.2 触发切换效果2.1.3 为选择卡添加fade样式2.1.4 胶囊式选项卡（nav-pills）2.1.5 JavaScript触发方法2.2 提示框-Too.
bootstrap4 左侧导航栏 优秀 大气_CSS导航栏制作总结
weixin_39888018的博客
11-23 1920
首先导航栏可以叫做链接列表。这样我们就能够清楚的知道，该如何进行制作了。我们使用列表元素 + 链接元素 = 列表链接（导航栏）为此 我制作了一个demo，效果展示在这里点击三种导航栏的制作前言在进行导航栏制作之前。我们需要知道，html中的列表中有一个默认的样式。如图所示对于ol和ul两种标签，有个默认的属性，padding-left=40px而margin-top和margin-bottom为1...
bootstrap4--导航及导航栏的创建
zxn200125的博客
12-19 5462
bootstrap4中导航创建和导航栏创建介绍
头部导航fixed定位后，a锚点定位有偏差（上部分被遮挡）
lingyang999的博客
07-25 3392
这两天实现了一个很简单的静态页面，主要功能就是在nav中设置几个导航按钮，点击之后可以跳转到该页面中对应的地方，如下图所示： 在实现该功能的过程中遇到一个小问题：当设置完锚点，对nav进行fixed固定定位之后, 主要代码（非全部代码，读懂即可） 设置锚点： <a class="header-ls-item" href="#advantage" >优势</a&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值