将引导导航栏固定到屏幕顶部答案

【问题标题】：Pinning a Bootstrap Navbar to the Top of the Screen将引导导航栏固定到屏幕顶部
【发布时间】：2021-07-02 15:46:22
【问题描述】：

如何将 Bootstrap 导航栏固定到屏幕顶部？我试过导入 JS 代码，但它似乎不起作用，最糟糕的是，它在实现时试图粘在顶部会出现故障，但是当你向下滚动时，它实际上并不是一个粘性导航栏。有没有实用的方法来解决这个问题？

此外，当您更改尺寸以使其更小时，导航栏将进入汉堡布局。然后，当您将鼠标悬停在它上面时，汉堡按钮图标上方会有一个深黑色阴影/背景。我们怎样才能摆脱它？如果有人对导航栏有专业知识，将不胜感激。

编辑：这两个问题都已解决。我确实有一个关于制作它的问题，以便当用户向下滚动时，导航栏不会在图像下方通过，如此处所示。

这是 HTML 代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="fusebloomLogo.png" sizes="32x32" type="image/png"> 
<!-- import Lora font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<!-- import Poppins font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap" rel="stylesheet">
<!-- import Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<script src="script.js"></script>
<nav id="navbar_top" class="navbar navbar-light bg-white navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>    
      </button>
      <!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
      <a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo"/></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#mission">Mission</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#reviews">Reviews</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#process">Process</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这是 CSS 代码：

  html {
   scroll-behavior: smooth;
  }

  nav {
    font-family: 'Poppins', sans-serif;
    position: sticky;
    border: 0;
  }

  .nav-link {
    margin-top: 0em;
    margin-left: 1.5em;
    font-size: 1.2em;
  }

  @media screen and (min-width: 768px) {
    .nav-link {
    margin-top: 1.0em;
    margin-left: 1.5em;
    font-size: 1.2em;
   }
  }

  /* Goal: Change the anchor links to color of black, the active or hovering anchor links to color of grey, and erase the black rectangle around active links */

 .navbar-light .nav-item.active .nav-link,
 .navbar-light .nav-item .nav-link:active,
 .navbar-light .nav-item .nav-link:focus,
 .navbar-light .nav-item:hover .nav-link {
    color: black;
 }

 .navbar-light .nav-item .nav-link:focus {
    background-color: white;
 }

 .icon-bar {
    background-color:#000000 !important;
    border: 0;
 }

 .navbar-light {
    background-color: white !important; 
    border: none !important;
    border-width:0!important;
 }

 .logo {
    margin-left: 25px;
    width: 80px;
    height: 80px;
 }

这是 JS 代码：

/* Navbar Sticky Header */
document.addEventListener("DOMContentLoaded", function(){
    window.addEventListener('scroll', function() {
       if (window.scrollY > 50) {
          document.getElementById('navbar_top').classList.add('fixed-top');
          // add padding top to show content behind navbar
         navbar_height = document.querySelector('.navbar').offsetHeight;
         document.body.style.paddingTop = navbar_height + 'px';
       } else {
          document.getElementById('navbar_top').classList.remove('fixed-top');
          // remove padding top from body
          document.body.style.paddingTop = '0';
       } 
    });
 }); 
 // DOMContentLoaded  end

【问题讨论】：

在 sn-p 中编辑您的代码，以便查看者看到您的问题以及您想要什么。顺便说一句，请参考此链接。 getbootstrap.com/docs/4.0/examples/navbar-fixed/#

标签： javascript html css twitter-bootstrap

【解决方案1】：

给你……我会回答你的两个问题。

1。粘性导航栏

你不需要 JS 来制作一个粘性导航栏。这比你想象的要容易得多。只需将其添加到您的 CSS 中：

#navbar_top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

2。将鼠标悬停在汉堡上时背景颜色较深

这不是阴影，而是当您将鼠标悬停在汉堡上时的背景颜色。当然，你可以摆脱它。事实上，您可以摆脱任何 Bootstrap 的默认设置，但您需要添加 !important 来覆盖它们。将此添加到您的 CSS：

.navbar-toggle:hover {
  background-color: transparent !important;
}

请参阅下面的 sn-p。

html {
  scroll-behavior: smooth;
}

nav {
  font-family: 'Poppins', sans-serif;
  position: sticky;
  border: 0;
}

.nav-link {
  margin-top: 0em;
  margin-left: 1.5em;
  font-size: 1.2em;
}

@media screen and (min-width: 768px) {
  .nav-link {
    margin-top: 1.0em;
    margin-left: 1.5em;
    font-size: 1.2em;
  }
}


/* Goal: Change the anchor links to color of black, the active or hovering anchor links to color of grey, and erase the black rectangle around active links */

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
  color: black;
}

.navbar-light .nav-item .nav-link:focus {
  background-color: white;
}

.icon-bar {
  background-color: #000000 !important;
  border: 0;
}

.navbar-light {
  background-color: white !important;
  border: none !important;
  border-width: 0!important;
}

.logo {
  margin-left: 25px;
  width: 80px;
  height: 80px;
}

#img {
  height: 50%;
}

#navbar_top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.navbar-toggle:hover {
  background-color: transparent !important;
}

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

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='style.css' rel='stylesheet' type='text/css' />
  <link rel='icon' href='fusebloomLogo.png' sizes='32x32' type='image/png'>
  <!-- import Lora font -->
  <link rel='preconnect' href='https://fonts.googleapis.com'>
  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
  <link href='https://fonts.googleapis.com/css2?family=Lora&display=swap' rel='stylesheet'>
  <!-- import Poppins font -->
  <link rel='preconnect' href='https://fonts.googleapis.com'>
  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
  <link href='https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap' rel='stylesheet'>
  <!-- import Bootstrap -->
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

</head>

<body>

  <script src='script.js'></script>
  <nav id='navbar_top' class='navbar navbar-light bg-white navbar-inverse'>
    <div class='container-fluid'>
      <div class='navbar-header'>
        <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </button>
        <!-- <a class='navbar-brand' href='#'>WebSiteName</a> -->
        <a href='index.html'><img id='img' src='fusebloomLogo.png' alt='FuseBloom logo' class='logo' /></a>
      </div>
      <div class='collapse navbar-collapse' id='myNavbar'>
        <ul class='nav navbar-nav'>
          <li class='nav-item'>
            <a class='nav-link' href='#home'>Home</a>
          </li>
          <li class='nav-item'>
            <a class='nav-link' href='#mission'>Mission</a>
          </li>
          <li class='nav-item'>
            <a class='nav-link' href='#reviews'>Reviews</a>
          </li>
          <li class='nav-item'>
            <a class='nav-link' href='#process'>Process</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>

</body>

</html>

【讨论】：

啊，这太棒了！谢谢你。在网站上，有图像，当您向下滚动时，导航栏会隐藏在某些图像下方。我会附上一张图片来告诉你我的意思。哪个属性可以解决这个问题？
没关系，它看起来已经修复但我会告诉你它是否仍然存在。
不客气。 :) 解决这个额外的问题/挑战很容易。将z-index: 100 !important; 添加到#navbar_top。我测试了它，它也应该在你的代码中工作。注意：z-index 仅适用于定位元素和弹性项目（我们设置了position: sticky !important;）。 Z-index 可以将元素“推”到前面（正值）或后面（负值）。您可以将 z-index 设置为 1 或 100 或 1000。没关系，只要它是代码中的最高数字（因为您希望导航栏位于其他所有内容的顶部）。
非常感谢，你很友善@Cervus camelopardalis。我又添加了一行代码，它是固定的。
谢谢，我猜。 :) 很高兴听到这个消息。