Fiksna pop-up navigacija za jQuery web stranicu, CSS. Uputstva i primjeri
U ovom članku ćemo vam pokazati kako da zaglavlje stranice bude prikazano kada skrolujete prema gore, ali da se u isto vrijeme sakrijete kada skrolujete prema dolje, kako nam ne bi blokirali prikaz same stranice.
U ovom članku ćemo vam pokazati kako da zaglavlje stranice bude prikazano kada skrolujete prema gore, ali da se u isto vrijeme sakrijete kada skrolujete prema dolje, kako nam ne bi blokirali prikaz same stranice.
Pogledajte DEMO Preuzmite primjer
Priprema za rad
Prvo nam treba zaglavlje i neki sadržaj da bi se skrol pojavio . Da bismo to učinili, napisat ćemo HTML i CSS kod za primitivnu stranicu.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Шапочное волшебство</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#">О компании</a></li>
<li><a href="#">Наша деятельность</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Контент</h1>
</main>
</body>
</html>CSS:
body, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
vertical-align: baseline;
}
.container {
width: 970px;
margin: 0 auto;
padding: 0 15px;
display: block;
position: relative;
}
header {
background: orange;
}
header ul {
display: flex;
justify-content: space-between;
align-items: center;
}
body {
background: grey;
height: 150vh;
}
Stilovi za implementaciju zadatka
Sada možemo započeti naš glavni zadatak, odnosno pisanje koda za pomicanje zaglavlja. Počećemo sa pisanjem stilova, a zatim preći na pisanje JS koda koristeći JQuery biblioteku.
Prvo, napišimo stilove za samo zaglavlje:
header {
position: fixed;
left: 0;
top: 0;
background: orange;
width: 100%;
-webkit-transition: top 0.4s;
-moz-transition: top 0.4s;
-o-transition: top 0.4s;
transition: top 0.4s;
}
Ovdje smo zaglavlju dali fiksnu poziciju i pozicionirali ga u odnosu na lijevu i gornju ivicu roditeljskog elementa. Postavili smo njegovu širinu i omogućili animaciju pomicanja u više pretraživača koristeći svojstvo “ top ”. Ali pošto smo zaglavlje postavili na fiksni položaj, ono je ispalo iz opšteg toka, a ostatak stranice se pritisnuo prema gore (odvezao se ispod zaglavlja). Da biste to učinili, tijelo stranice treba dodati uvlaku koja odgovara visini zaglavlja, u našem slučaju to je 50 piksela:
body {
padding-top: 50px;
}
Zatim, postavimo stilove tako da se zaglavlje pomiče nagore kada se pomiče prema dolje po stranici:
.fixed-header header {
top: -50px;
}
I vraća se nazad prilikom pomicanja – gore:
.fixed-header .show {
top: 0;
}Time je zaokružen stil naše stranice. Ali ako osvežimo stranicu, vidimo da se ništa ne dešava. Zašto? Stvar je u tome što naš HTML dokument nema klase “ fixed-header ” i “ show ” koje smo ranije upisali u CSS dokument. Ali jednostavno dodavanje klasa neće nam pomoći da realizujemo svoj zadatak. Potrebno nam je da se ove klase kreiraju i brišu na određenim događajima, za to nam je potreban JavaScript, o čemu smo ranije govorili
Povezivanje skripti
Da bismo implementirali ovaj korak našeg zadatka, moramo povezati standardnu JQuery biblioteku, u našem slučaju to je verzija 3.3.1. JQuery je divan JavaScript okvir koji impresionira svojom lakoćom razumijevanja i lakoćom korištenja. Za početak, trebat će vam sam okvir, možete ga preuzeti na službenoj web stranici JQuery. Zatim ga je potrebno povezati pored veze sa CSS fajlom na sledeći način:
<script src="/js/jquery-3.3.1.min.js"></script>Zatim, pređimo na pisanje samog koda umetanjem oznake “ script ”. U pravilu, skripte se ubacuju na kraj tijela stranice ili iza selektora u kojem se koriste:
<script type="text/javascript">
$(document).ready(function(){ //Вызов функции по загрузке интерфейса
var tempScrollTop, currentScrollTop = $(window).scrollTop(); //объявление переменных и присвоение им значений
$(window).scroll(function(){ //Вызов функции при прокрутке страницы
currentScrollTop = $(window).scrollTop(); //присвоение переменной нового значения
if (currentScrollTop > $('header').height()) { //Проверка условия 'переменная больше высоты шапки'
$('body').addClass('fixed-header'); // создание класса 'fixed-header' в селекторе 'body'
if ( tempScrollTop > currentScrollTop ) { //Проверка условия 'значение переменной до вызова функции больше значения после её вызова'
$('header').addClass('show'); //создание класса 'show' в селекторе 'header'
} else { // выполнение, если второе условие не прошло проверку
$('header').removeClass('show'); //удаление класса 'show' в селекторе 'header'
}
} else { // выполнение, если первое условие не прошло проверку
$('body').removeClass('fixed-header'); // удаление класса 'fixed-header' в селекторе 'body'
$('header').removeClass('show'); //удаление класса 'show' в селекторе 'header'
}
tempScrollTop = currentScrollTop; //присвоение одной переменной значение другой
});
});
</script>U ovom kodu koristimo metodu Jquery biblioteke " .ready " koja izvršava funkciju nakon što se DOM (sučelje) potpuno učita. Zatim ćemo dodati samu funkciju koju treba izvršiti metodom. U ovoj funkciji deklariramo varijable i dodjeljujemo im vrijednost, koju nam vraća metoda .scrollTop , .ScrollTop - dobiva/postavlja vrijednost uvlake za pomicanje vrha.
Varijabla “ tempScrollTop” uzima svoju vrijednost prije nego što funkcija bude pokrenuta metodom “ .scroll ”, a varijabla “ currentScrollTop ” uzima svoju vrijednost nakon toga. Nakon toga dodajemo funkciju koja će biti pozvana metodom “ .scroll ”. Događaj " pomicanje " se šalje kada se promijeni pozicija pomicanja elementa, bez obzira na razlog, da li miš klikće na traku za pomicanje, ili povlači traku za pomicanje, prevlači unutar elementa, pritiska tipke sa strelicama ili se kreće pomoću kotačić miša.
Zatim ovu funkciju popunjavamo kodom u kojem postavljamo varijablu currentScrollTop na novu vrijednost dobivenu metodom .scrollTop() koja nam je već poznata . U sljedećem redu postavljamo uvjet da ako je varijabla currentScrollTop veća od visine selektora zaglavlja (dobijenog pomoću .height() metode ) uvećane za 5 piksela, tada se izvršavaju redovi koda od 3 do 8 (Konkretno , koristeći metodu .addClass , kreiramo klasu za selektor tijela, nakon čega se provjerava još jedan uslov, koji kaže "ako je varijabla tempScrollTop veća od varijable currentScrollTop," tada se show klasa kreira u selektoru zaglavlja pomoću .addClass metoda, ako ovaj uslov ne prođe, onda se show klasa uklanja iz selektora zaglavlja pomoću metode .removeClass ). Inače se izvršavaju linije 10 i 11 (koji, koristeći metodu .removeClass , uklanjaju klasu fiksnog zaglavlja iz selektora tijela , a show klasu iz selektora zaglavlja ). I nakon što su ovi uslovi ispunjeni, na kraju funkcije dodajemo red: tempScrollTop = currentScrollTop ;, koji dodeljuje vrijednost varijable currentScrollTop varijabli tempScrollTop . Ovo je neophodno da bi se sačuvala vrednost tempScrollTop varijable za svako sledeće izvršavanje funkcije metodom .scroll .
Kao rezultat toga, naša skripta poprima gore navedeni oblik i izvodi sve radnje koje su nam potrebne.