Sticky Bootstrap Navbar 和 Smooth-Scroll - Padding / Margin-Top

Posted

技术标签:

【中文标题】Sticky Bootstrap Navbar 和 Smooth-Scroll - Padding / Margin-Top【英文标题】：Sticky Bootstrap Navbar and Smooth-Scroll - Padding / Margin-Top 【发布时间】：2022-01-18 23:43:24 【问题描述】：

我正在尝试使用 平滑滚动行为实现 引导粘性导航栏（固定高度为 81 像素）。

html 站点具有部分标记，例如<section class="section" id="news">，通过在导航栏中使用<a class="nav-link" href="#news">News</a> 可以跳转到某些区域。我正在使用以下 CSS 和 JS 技术，它们在 <body> 的开头加载：

https://getbootstrap.com/docs/4.6/components/navbar/ https://github.com/iamdustan/smoothscroll https://github.com/jonaskuske/smoothscroll-anchor-polyfill

到目前为止它有效：在引导程序特定的--breakpoint-lg 992 像素处，导航栏折叠成汉堡菜单。为了补偿固定高度的导航栏，我在custom.css 中添加了以下代码（当然是在bootstrap.min.css 之后加载），根据https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/ 发现的一个技巧

@media (max-width: 991px) 
    section 
        padding-top: 382px;
        margin-top: -382px;
    


@media (min-width: 992px) 
    section 
        padding-top: 80px;
        margin-top: -80px;

这适用于较大尺寸的浏览器窗口宽度，但一旦加载到较小宽度的窗口（991 像素及以下） - 在几乎所有移动设备上 - 点击导航栏链接跳转到一个稍微垂直偏移的点。 任何想法为什么会发生这种情况？似乎我对 max-width: 991px 的媒体查询被忽略了。

【问题讨论】：

【参考方案1】：

感谢您对创建 sn-p 的建议。这显示了工作技巧，通过使用部分中各个 div 的背景颜色。这样，第一个元素（一个 h2 标题）位于我们跳转到的每个区域的顶部。当不使用背景颜色时，这完全适用于中间带有 h2 标题的连续文本的查看者和阅读者。

我想我找到了一个令人满意的解决方案。我对padding-top / margin-top 技巧的问题是：我没有在 CSS 中（正确地）设置<div class="container" id="first"> 的样式，而是设置了<section> 的样式。最终，我也不再需要 @media 查询了。

$(function() 
  $(".nav-link").click(function() 
    let nav = $(".navbar-collapse");
    if (nav.hasClass("show")) 
      nav.removeClass("show");
    
  )
)
html 
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
  font-family: 'scroll-behavior: smooth;', sans-serif;


.container 
  padding-top: 80px;
  margin-top: -80px;


p 
  line-height: 2em;


.navbar 
  background: lightgoldenrodyellow;


.container 
  display: grid;


#first 
  background-color: lightcoral;


#second 
  background-color: lightgreen;


#third 
  background-color: lightblue;


#fourth 
  background-color: lightgray;


#fifth 
  background-color: lightyellow;

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

<head>
  <title>bootstrap / breakpoint / smooth-scroll issue</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="custom.css">
</head>

<body>

  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery.easing@1.4.1/jquery.easing.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/smoothscroll@0.4.0/smoothscroll.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/smoothscroll-anchor-polyfill@1.3.4/dist/index.min.js"></script>
  <script src="script.js"></script>

  <!-- Navigation Start -->
  <nav class="navbar navbar-expand-lg sticky-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto navbar-center">
        <li class="nav-item active">
          <a class="nav-link" href="#first">First</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#second">Second</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#third">Third</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#fourth">Fourth</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#fifth">Fifth</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation End -->

  <!-- Content Start -->
  <section class="section">
    <div class="container" id="first">
      <h3>first</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="section">
    <div class="container" id="second">
      <h3>second</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="section">
    <div class="container" id="third">
      <h3>third</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="section">
    <div class="container" id="fourth">
      <h3>fourth</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="section">
    <div class="container" id="fifth">
      <h3>fifth</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  <!-- Content End -->

</body>

</html>

【讨论】：

不错。很高兴你把事情解决了。请务必接受您的回答以解决此帖子。

以上是关于Sticky Bootstrap Navbar 和 Smooth-Scroll - Padding / Margin-Top的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 3.0.3 navbar-right 和 pull-right

Bootstrap2 Navbar 和下面的行之间的神秘空白

Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题

navbar navbar-inverse 导航条设置颜色

Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单

Bootstrap——导航条（navbar）