Sticky Header On Scroll đơn giản bằng HTML, CSS
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!
Các bài viết liên quan:
Cách làm hiệu ứng Scroll Indicator đơn giản bằng HTML, CSS và
Javascript
Cách làm Video Slider đơn giản bằng HTML, CSS và
Javascript
Input Validator đơn giản bằng HTML, CSS và Javascript
Animated Login Form đơn giản bằng HTML và CSS
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!