Przyklejony nagłówek w html, js i css, sticky header
Projektując dłuższe strony w html, czasem przydaje się opcja przyklejenia nagłówka wraz z menu, by łatwo i szybko przełączać się po podstronach. Po użyciu scrolla możemy uzyskać efekt zmniejszenia loga i przyklejenia go wraz z menu, na samej górze strony.
Dodajemy skrypt js
W head dodajemy linijkę z biblioteką jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>A przed dole szkieletu strony, przed </body> dodajemy:
<script src="script/sticky-header.js"></script>
Uprzednio należy założyć folder o nazwie script i utworzyć plik z nazwą sticky-header.js, który będzie miał taki kod:
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.my-header').addClass("sticky");
}
else{
$('.my-header').removeClass("sticky");
}
});
Dodajemy klasę .my-header
W <body></body> należy utworzyć nagłówek, czyli standardowo dodać logo oraz menu oparte na liście <ul> <li>. Całość nagłówka musi być w divie <div class=”my-header”></div>, który jak widzicie znajduje się w powyższym kodzie java script.
Dodajemy style.css
W head dodajemy linijkę z plikiem style.css:
<link rel="stylesheet" type="text/css" href="style.css" />
A w pliku style.css znajduje się oprócz standardowego kodu z tłem, czcionką, układem strony i innymi elementami, kod przyklejanego nagłówka:
.my-header {position: fixed; width: 100%; height: 100px; padding-top: 1%; transition: all 0.4s ease;}
.my-header img {width: 100%;}
.my-header .logo {float: left; margin: 0;}
.my-header.sticky {height: 80px; background: #000000;}
.my-header.sticky .logo img{width: 80%; transition-duration: 0.2s; transition-timing-function: linear;}
To by było na tyle, poniżej zamieszczam cały szkielet pliku index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Sticky header</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index, follow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="www.tworzenie-stronek.pl" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="top">
<!--menu start-->
<div class="my-header">
<div class="page">
<div class="logo">
<a href="index.html" target="_parent"><img src="images/logo.png" alt="Home"></a>
</div>
<div id="cssmenu">
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='index.html'>Kontakt</a></li>
</ul>
</div>
</div>
<!--menu end-->
</div>
</div>
<script src="script/sticky-header.js"></script>
</body>
</html>
