Jednoduchý kód pro zafixování například menu v horní části prohlížeče. Typické je to právě pro stálé zobrazení odkazů na webových stránkách.
Pro ukotvení elementu na stránce lze využít vlastnosti CSS position:fixed, nebo sticky. To má svá pravidla, jako sticky element musí být v kořenu html apod. Druhou možností je využít Javascript v kombinaci s CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Menu Example</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="contain-to-grid stickyMenu">
<div class="container">
<div class="topmenucatalog">
<nav class="navbar navbar-expand-md upmenu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#upMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="upMenu">
Menu Items
</div>
</nav>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
.stickyMenu.is-stuck {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}Javascript
$(document).ready(function() {
var stickyMenu = $('.stickyMenu');
var stickyMenuOffset = stickyMenu.offset().top;
$(window).on('scroll', function() {
if ($(window).scrollTop() >= stickyMenuOffset) {
stickyMenu.addClass('is-stuck');
} else {
stickyMenu.removeClass('is-stuck');
}
});
});- Po načtení dokumentu získáme offset horního okraje elementu stickyMenu.
- Při scrollování okna zkontrolujeme, zda je horní okraj stránky (scrollTop) větší nebo roven offsetu elementu stickyMenu.
- Pokud ano, přidáme třídu is-stuck pro fixní pozici.
- Pokud ne, třídu is-stuck odstraníme.
Tímto způsobem bude váš element stickyMenu zafixován u horního okraje prohlížeče při scrollování.