Sticky Header On Scroll đơn giản bằng HTML, CSS và Javascript

Sticky Header On Scroll đơn giản bằng HTML, CSS

Sticky Header On Scroll đơn giản bằng HTML, CSS và Javascript

Chào mọi người,

Trong thế giới phát triển web ngày nay, việc tạo ra trải nghiệm tốt cho người dùng luôn đứng đầu ưu tiên. Một trong những hiệu ứng phổ biến và hữu ích là "Sticky Header On Scroll" - một cách để giữ cho phần tiêu đề của trang web luôn hiển thị ở đầu trang khi người dùng cuộn xuống. Điều này không chỉ làm cho trải nghiệm sử dụng trang web trở nên thuận tiện hơn mà còn tạo ra sự liên kết liền mạch giữa người dùng và nội dung quan trọng trên trang.

Với việc kết hợp sử dụng ngôn ngữ lập trình HTML, CSS và JavaScript, chúng ta có thể dễ dàng thực hiện hiệu ứng Sticky Header On Scroll. Bằng cách sử dụng HTML để xây dựng cấu trúc của trang, CSS để tạo kiểu cho tiêu đề và xác định vị trí dính, và JavaScript để thay đổi vị trí của tiêu đề khi người dùng cuộn trang, chúng ta có thể tạo ra một hiệu ứng đáng chú ý mà không cần phải sử dụng thư viện bên ngoài.

Trong đoạn mã mẫu, tiêu đề sẽ dính ở đầu trang khi người dùng cuộn xuống và tự động ẩn đi khi người dùng cuộn lên trên. Điều này giúp tiết kiệm không gian màn hình và giúp người dùng dễ dàng truy cập vào các phần quan trọng của trang mà không cần phải lăn chuột lên đầu trang.

Dưới đây là một ví dụ về cách thực hiện hiệu ứng Sticky Header On Scroll sử dụng HTML, CSS và JavaScript. Hãy cùng khám phá và áp dụng hiệu ứng thú vị này vào các dự án web của bạn!

Bước 1: Thêm HTML


<header>
    <a href="#" class="logo">Logo</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</header>
<div class="banner"></div>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #000;
    min-height: 200vh;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 100px;
    transition: all 0.3s;
}

header .logo {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}


header ul li a {
    padding: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 600;
}

header ul li a:hover {
    opacity: 0.8;
}

header.sticky {
    padding: 10px 100px;
    background-color: #fff;
    color: #333;
}

header.sticky .logo,
header.sticky ul li a {
    color: #333;
}

.banner {
    width: 100%;
    height: 100vh;
    background: url('https://images.unsplash.com/photo-1682685796444-acc2f5c1b7b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
    background-size: cover;
}


Bước 3: Thêm Javascript


window.addEventListener('scroll', () => {
    const header = document.querySelector('header');
    header.classList.toggle('sticky', window.scrollY > 0);
})

Full tutorial:


Hoàn thành

Tóm lại, hiệu ứng Sticky Header On Scroll là một công cụ mạnh mẽ để cải thiện trải nghiệm người dùng trên trang web của bạn. Nhờ việc giữ cho phần tiêu đề luôn hiển thị ở đầu trang, ngay cả khi người dùng cuộn xuống, chúng ta đã tạo ra một cách tiện lợi để truy cập nhanh chóng vào nội dung quan trọng. Việc thực hiện hiệu ứng này bằng cách kết hợp HTML, CSS và JavaScript không chỉ mang lại tính thẩm mỹ mà còn thể hiện khả năng sáng tạo của bạn trong việc tạo ra trải nghiệm web tốt nhất cho người dùng.

Đừng ngần ngại thử nghiệm và tùy chỉnh hiệu ứng theo ý muốn để phù hợp với ý tưởng thiết kế của bạn. Bằng cách áp dụng kiến thức từ bài viết này, bạn có thể tạo ra các trang web thú vị và hấp dẫn hơn bao giờ hết. Chúc bạn thành công trong việc áp dụng hiệu ứng Sticky Header On Scroll vào các dự án web của mình!

No comments:

Powered by Blogger.