Є така модна зараз фішка на деяких сайтах — при прокрутці сторінки вниз, верхня частина сайту (там може бути лого, горизонтальне меню, форма пошуку чи посилання на соцмережі) залишається на своєму місці, а інша частина сторінки ховається під неї. Виглядає непогано і функціонально — потрібні елементи меню завжди під рукою.
Це зробити не так уже й важко. Потрібно лише взяти потрібну частину сторінки (там де лого і меню чи що вам там ще потрібно) в окремий контейнер-div з параметрами position:fixed; top:0;
Таким чином, даний контейнер буде постійно зафіксований зверху. Але є одне але. Вміст фіксованого контейнера налягає на вміст іншої частини сторінки і вони обидва показуються одночасно — виходить каша. Щоб цього позбутися, потрібно вказати високе значення z-index для нашого фіксованого контейнера — в такий спосіб зробивши його верхнім шаром. Все інше при прокрутці ховатиметься під нього.
Ще один момент. Щоб наш контейнер, при першому завантаженні сторінки, не закривав собою вміст нижньої частини сайту, — її (нижню частину сайту) слід трохи опустити. На висоту, рівну висоті нашого фіксованого контейнера. Зробити це можна, розмістивши ще один контейнер-div з відповідним значенням висоти.
На цьому все.
Ось, як це виглядає в коді.
Код html:
<div class=”headerfixed”>
тут ваш логотип, пункти меню, форма пошуку чи ін.
</div>
<div class=”pusto”></div>
Код css:
.headerfixed
{
width:100%;
position:fixed;
top:0;
z-index:1000;
}
.pusto
{
height:100px;
}
Можна, звичайно ж, додати багато різних ефектів, типу тінь від верхньої смужки, зміщення на кілька пікселів (ефект заломлення) чи напівпрозорість… та це на любителя.
Вам також буде цікаво:
