Question

我有一个网站，该网站的导航栏固定在该网站的顶部，并且在滚动时会向下滚动。此功能通过Bootstrap正常运行，应该保持不变。我需要在导航栏上方添加一个固定的50px容器，该容器不会随导航栏向下移动。当我尝试实现它时，导航栏要么覆盖了它，要么找到了容器。

<header>
  <nav class="navbar navbar-nav navbar-dark bg-alumni navbar-expand-md fixed-top nav-fill">
  <div class="container">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <a class="nav-link nav-item navbar-brand nav-justified" href="beta.html#">
    <img src="images/AlumniHallName_solo.svg" class="d-inline-block float-lg-left float-md-left" id="nav-logo">
   </a>
   <div class="collapse navbar-collapse justify-content-end col-lg-4 col-md-6" id="navbarNav">
     <a class="nav-link nav-item link" href="beta.html">About</a>
     <a class="nav-link nav-item link" href="faith.html">Faith</a>
     <a class="nav-link nav-item link" href="sports.html">Sports</a>
     <a class="nav-link nav-item link" href="pups.html">Pups</a>
   </div>
  </div>
  </nav>
</header>

Answer 1

这是我能想到的。它使用jQuery动态将导航栏更改为固定。您可以使用console.log测试何时切换到固定的导航菜单。我将在此处发布一些代码，但是我建议看一下我的代码笔here。

CSS：

.banner {
  height: 50px;
  width: 100%;
  background-color: red;
}

#navbar {
  border: 0;
  background-color: #4080ff;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

.navbarFixed {
  top: 0;
  position: fixed;
  width: 100%;
}

JavaScript：

$(function() {
  $(window).scroll(function() {

    //use this number to determine when to switch to fixed menu
    console.log($(window).scrollTop())

    if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');

    if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');

  });
});

HTML：

<div class="banner">Hello, Alec!</div>
<div id="navbar">
  <a>About</a>
  <a>Faith</a>
  <a>Sports</a>
  <a>Pups</a>
</div>

Bootstrap导航栏固定顶部

1 个答案: