Как да залепите div / навигационна лента в горната част на прозореца, когато сте превъртали покрай него - javascript, jquery, html, css

Имам меню за навигация, която е точно след заглавието

<header>
<center>
<img src="/images/"> Some other stuff
</center>
</header>

<div class="navbar">
<div class="nav">
<ul class="meniunav">
<li><a href=""><img src="/images/home.svg" class="navicon"> Home</a></li>
<li><a href=""><img src="/images/info.svg" class="navicon"> Info</a></li>
<li><a href=""><img src="/images/contact.svg" class="navicon"> Contact</a></li>
</ul>
</div>
</div>

Заглавието има височина 150px и искам да го направяелементът navbar се придържа към горната част на страницата, ако стигне до нея. За да стане по-ясно: когато преглеждам надолу, искам този елемент да се фиксира на върха, когато достигне до него, и ако се върна нагоре и той достигне първоначалната позиция, за да премахне фиксираната позиция. Как мога да направя това?

Отговори:

имате два начина да го направите:

Първо: използване position: sticky; който работи само на Firefox (ще трябва да чакаме много време, за да дойде това стандартно)

Второ (работа на всеки браузър): javascript. Има много скриптове в интернет и лесно можете да ги намерите. просто напишете "Sticky Navigation" в Google. Ето пример за това: https://codepen.io/Guilh/pen/JLKbn

Добре, така очевидно най-простият метод е:

$(window).scroll(function() {
if($(this).scrollTop() >= 150) {
$(".navbar").addClass("sticky");
}
else {
$(".navbar").removeClass("sticky");
}
});

С лепкавия клас, съдържащ:

.sticky {
position: fixed;
top: 0;
}