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>

Podobne wpisy

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments