Bootstrap: Navbar сокращается при прокрутке

Question

Я бы хотел, чтобы lo go и nav-ссылки сокращались при прокрутке страницы. На данный момент lo go слишком велик для липкой навигации. Я попытался добавить этот JS код -

$(window).on("scroll touchmove", function () {
  $('#navbar').toggleClass('tiny', $(document).scrollTop() > 0);
});

со следующим CSS, но это не сработало ....

.header.tiny {
    height:40px;
    background: #aaa;
}

Я новичок в веб-разработке, поэтому любые советы будут с благодарностью.

Я приложил фрагмент кода ...

Answer 1

Надеюсь, это вам очень поможет.

$(window).on("scroll", function(e) {
 if(window.scrollY > 0){
   $('#navbar').addClass('tiny');
 }
 else{
   $('#navbar').removeClass('tiny');
 }
});

.navbar, .navbar-brand svg{
  transition: 400ms;
}
.tiny{
  padding: .25rem 1rem;
}
.tiny .navbar-brand svg{
  width: 30px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-main sticky-top navbar-dark bg-dark" id="navbar">
  <a class="navbar-brand" href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">
          <a class="dropdown-item" href="#">Business Phone Systems</a>
          <a class="dropdown-item" href="#">Cat 6</a>
          <a class="dropdown-item" href="#">Cat 6a</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">
          <a class="dropdown-item" href="#">Cat 5</a>
          <a class="dropdown-item" href="#">Cat 6</a>
          <a class="dropdown-item" href="#">Cat 6a</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
	<div class="row">
		<div class="col-md-2">
			<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.
			</p>
			<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.
			</p>
			<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.
			</p>
			<hr>
			Last Line...
		</div>
	</div>
</div>

Answer 2

используйте это в течение 5 секунд для сокращения:

   $("body").scroll(function() {
                        $('#navbar1').animate({
                            height: <<required height>>
                        }, 5000);
                    });

и добавьте

<nav class="navbar navbar-expand-lg navbar-main sticky-top" id='navbar1'>

Answer 3

Здравствуйте, я думаю, что это спросит вашу проблему.