Прилипающее меню

Для создания прилипающего меню достаточно сделать несколько не сложных операций.

Сначала верстаем меню, которое будет приляпаться к верху при прокрутке сайта, пишем для него стили.

HTML меню примерный

	<div class="container-header4">
		<div class="container-header4-content">

			<div class="container-header4__menu">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav">
						<li class="nav-item">
						<a class="nav-link" aria-current="page" href="#"><i class="fa-solid fa-house"></i></a>
						</li>
						<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
						<i class="fa-solid fa-bars"></i> КАТАЛОГ ТОВАРОВ
						</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<li class="dropdown-submenu">
								<a class="dropdown-item dropdown-toggle" href="#">
								Товар
								</a>
									<ul class="dropdown-menu submenuright">
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
										</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
										</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									</ul>
								</li>

								<li class="dropdown-submenu">
								<a class="dropdown-item dropdown-toggle" href="#">
								Товар
								</a>
									<ul class="dropdown-menu submenuright">
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									</ul>
								</li>

								<li class="dropdown-submenu">
								<a class="dropdown-item dropdown-toggle" href="#">
								Товар
								</a>
									<ul class="dropdown-menu submenuright">
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									</ul>
								</li>

								<li class="dropdown-submenu">
								<a class="dropdown-item dropdown-toggle" href="#">
								Товар
								</a>
									<ul class="dropdown-menu submenuright">
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									</ul>
								</li>

								<li class="dropdown-submenu">
								<a class="dropdown-item dropdown-toggle" href="#">
								Товар
								</a>
									<ul class="dropdown-menu submenuright">
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									<li><a class="dropdown-item" href="#">
										<img class="dropdown-item-img" src="assets/images/logo_on_menu.jpg" alt="">
										Позиция товара
									</a>
									</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="nav-item">
						<a class="nav-link" aria-current="page" href="#">ДОСТАВКА И ОПЛАТА</a>
						</li>
						<li class="nav-item">
						<a class="nav-link" href="#">РАЗМЕРЫ</a>
						</li>
						<li class="nav-item">
						<a class="nav-link" href="#">АКЦИИ И СКИДКИ</a>
						</li>
						<li class="nav-item">
						<a class="nav-link" href="#">КОНТАКТЫ</a>
						</li>
						</ul>
					</div>
				</div>
			</nav>
			</div>

		</div>
	</div>

Далее создаем в нашем CSS класс fixed.

CSS Fixed

.fixed {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 100;}

После добавляем небольшой код JQuery в наш main.js, где в строке "if($(this).scrollTop()>170){" указываем высоту прокрутки, в которой будет происходить прилипание меню.

main.js

$(function(){
  if ( $(window).width() > 0 ) {

jQuery(function($) {
	$(window).scroll(function(){
	if($(this).scrollTop()>170){
	$('div.container-header4').addClass('fixed');
	}
	else if ($(this).scrollTop()<170){
	$('div.container-header4').removeClass('fixed');
	}
	});
	});

  }
});