Мне нужно сделать подменю всегда рядом с главным меню (заголовок).Заголовок всегда одинаков для всех подстраниц, но подменю отличается для каждой подстраницы.Я хочу, чтобы при прокрутке окна вниз, изменении заголовка и подменю по-прежнему рядом с заголовком - это работает, но если заголовок быстро перемещается в верхнюю часть, под заголовком прячется подменю.
Codepen: https://codepen.io/anon/pen/PVgNER
$(window).on('scroll', function (event) {
event.preventDefault();
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if (window.scrollY >= 100) {
$('.header').addClass('no-padd');
} else {
$('.header').removeClass('no-padd');
};
});
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
} else {
var hei = $('.header').outerHeight();
$('.page-content').css('margin-top', hei);
}
$(window).on('resize', function() {
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
}
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
});
.bg-black {
background-color: gray;
}
.header {
padding-top: 25px;
padding-bottom: 25px;
position: fixed;
top: 0;
z-index: 9999;
transition: all .1s;
}
.no-padd {
padding-top: 0;
padding-bottom: 0;
}
.header a {
color: #000;
font-size: 15px;
font-weight: 300;
text-decoration: none;
transition: all .1s;
}
.header a:hover {
color: #cba168;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav ul li {
padding-left: 15px;
padding-right: 15px;
}
nav ul li a{
display: block;
text-transform: uppercase;
text-align: center;
color: #ffffff;
padding-bottom: 15px;
padding-top: 15px;
transition: all .3s ;
}
.header-phone,
.header-socials {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header-phone a:after,
.header-socials a:after {
content: '';
display: block;
position: absolute;
border-right: 1px solid #cba168;
height: 100%;
top: 0;
right:0;
}
.header-phone i {
margin-right: 5px;
}
.header-socials a {
margin-right: 10px;
}
.bg-brown {
background-color: #252525;
}
.submenu {
position: fixed;
top: 0%;
z-index: 99;
transition: all .1s;
}
.submenu ul {
display: flex;
align-items: center;
list-style-type: none;
justify-content: flex-start;
padding-left: 25%;
margin: 0;
}
.submenu ul li a {
color: #fff;
font-size: 15px;
text-decoration: none;
display: block;
padding: 15px 35px;
transition: all .3s;
}
.submenu ul li:hover a {
color: #cba168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<div class="container-fluid themewidth bg-black header" id='header'>
<div class="row">
<div class="col-6 col-lg-2 d-flex align-items-center justify-content-center logo">
<a href="/"><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width=50; alt=""></a>
</div>
<div class="col-lg-6 pl-4 main-menu d-flex justify-content-center align-items-center">
<nav><ul><li><a href=''>header 1</a></li><li><a href=''>header 2</a></li><li><a href=''>header 3</a></li></ul></nav>
</div>
<div class="col-6 col-lg-4 pr-0 pl-0 d-flex justify-content-center align-items-center">
<div class='header-phone pr-4 pl-4'>
<a href='tel:+121212'>
<i class="fas fa-phone fa-rotate-90"></i><span>+12 12 12 12</span>
</a>
</div>
<div class='header-socials pr-4 pl-4'>
<a href="https://www.facebook.com/"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://pinterest.com/"><i class="fab fa-pinterest"></i></a>
<a href="https://pl.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid bg-brown submenu">
<div class="row">
<div class="col-12">
<nav>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
</ul>
</nav>
</div>
</div>
</div>
<main class='page-content pt-5'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
</main>