jquery - 向下滚动网站时降低导航栏高度

问题描述

我有一个用 bootstrap 4 制作的固定导航栏。当我向下滚动页面时，我想降低导航栏的高度。当我尝试向下滚动页面时。高度没有降低。下面是我浏览器的视频链接

我已经尝试过的一些代码

$(document).ready(function() {
  $('.nav-button').click(function() {
    $('.nav-button').toggleClass('change');
  });

  $(window).scroll(function() {
    var position = $(this).scrollTop();
    if (position >= 200) {
      $('.nav-menu').addClass('.custom-navbar');
    } else {
      $('.nav-menu').removeClass('.custom-navbar');
    }
  });
});

body {
  font-family: 'Montserrat', sans-serif;
}


/* Header */

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)), url(images/header-img.jpeg) no-repeat center center/cover;
}


/* Navbar */

.nav-menu {
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5));
  padding: 30px;
  transition: all .7s;
}

.menu-item {
  font-size: 13px;
  letter-spacing: 1px;
  color: #eee;
  transition: color .5s;
}

.menu-item:hover {
  color: #70aed2;
}

.line1,
.line2,
.line3 {
  width: 23px;
  height: 3px;
  margin: 5px;
  transition: all .4s;
}

.change .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .line2 {
  opacity: 0;
}

.change .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.custom-navbar {
  padding: 5px 30px;
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .7));
}


/* End of Navbar */


/* Banner */

.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.banner-heading {
  animation: anim 2s;
}

.banner-para {
  animation: anim 2s .5s backwards;
}

@keyframes anim {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* End of Banner */


/* End of Header */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg fixed-top nav-menu">
    <a href="#" class="navbar-brand text-light text-uppercase"><span class="h2 font-weight-bold">photo</span><span class="h1">X</span></a>
    <button class="navbar-toggler nav-button" type="button" data-toggle="collapse" data-target="#myNavbar">
            <div class="bg-light line1"></div>
            <div class="bg-light line2"></div>
            <div class="bg-light line3"></div>
          </button>
    <div class="collapse navbar-collapse justify-content-end text-uppercase font-weight-bold" id="myNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Mission</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Collection</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Gallery</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Customers</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link m-2 menu-item">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- End of Navbar -->

  <!-- Banner -->
  <div class="text-light text-md-right text-center banner">
    <h1 class="display-4 banner-heading">Welcome to <span class="text-uppercase">photo</span> <span class="display-3">X</span></h1>
    <p class="lead banner-para">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
  </div>
  <!-- End of Banner -->
</header>
<!-- End of Header -->

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

标签： jqueryhtmlcss

jquery - 向下滚动网站时降低导航栏高度

问题描述

解决方案

推荐阅读