Sticky header - {dev} blondie;

С този снипет ще научиш как функционира една от най-често срещаните интеракции в уеб – т.нар. sticky header.

Първо започваме с HTML markup-a, който е индикативен и може да редактираш и добавиш още елементи:

<div class="header" id="header">
    <div class="logo" id="header-logo">
        <a href="#" title="link to home page">                  
            <svg class="logo-svg" viewBox="0 0 239 61" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5648 57.4838C44.5033 57.4838 56.6134 45.3738 56.6134" fill=""/>
                <path d="M82.4332 30.0359C77.0063 30.0359 73.1958 25.8214 73.1669" fill=""/>
            </svg>
        </a>
    </div>
</div>

Минаваме и към vanilla JavaScript-a, който ни е необходим, за да изпълним тази функционалност:

// Select the header element
const header = document.getElementById('header');

// Get the offset position of the header
const sticky = header.offsetTop;

// Add scroll event listener to the window
window.onscroll = function() {
    stickyHeader();
    // console.log('check if it works properly')
};

// Function to add or remove the "sticky" class based on scroll position
function stickyHeader() {
    if (window.scrollY > sticky) {
        header.classList.add("sticky"); // Adds sticky class when scrolled past header
    } else {
        header.classList.remove("sticky"); // Removes sticky class when back to top
    }
}

Какво прави самият script? Първо селектираме header елемента по неговото ID, след това в една нова променлива sticky запазваме отстоянието от този елемент до top позицията на браузъра. Във функцията stickyHeader използваме условна конструкция (if/else) и проверяваме дали се намираме най-горе спрямо viewport-a (използвайки обекта window и scrollY) и ако не сме – добавяме класс sticky на елемента header, а ако сме – премахваме класа sticky.

След това, разбира се, можем да добавим и малко CSS, посредством който да придадем различни стилове за header елемента, когато има наличен клас sticky:

header {
    &.sticky {
        position: sticky;
        top: 0px;
        padding: 2rem 5rem;
        background-color: @white;
    }
}

Happy coding 🙂

Популярни уроци и статии