Tạo Sticky Navigation Bằng HTML CSS Javascript

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo sticky navigation (thanh tiêu đề) cho trang web bằng HTML, CSS và Javascript nhé!

Tạo Cấu Trúc HTML Cho Sticky Navigation

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với CDN Google Font, Font Awesome v4.7, Jquery CDN bằng đoạn mã dưới đây nhé:

HTML:

<!DOCTYPE html> <html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tạo Sticky Navbar Cho Trang Web</title>
     <!--Liên Kết Font Awesome v4.7 CDN-->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--Liên Kết Google Font Roboto-->
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
     <!--Liên Kết File style.css-->
     <link rel="stylesheet" href="style.css">
 </head>
<body>
 <!--Liên Kết CDN Jquery 3.5.1-->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 </body>
</html>

Thêm Các Thẻ HTML Cần Thiết Cho Sticky Navigation

Sau khi đã thiết lập xong xuôi các thư viện cần thiết thì việc tiếp theo chúng ta sẽ đi vào tạo cấu trúc cho thanh tiêu đề thông qua các thẻ HTML cơ bản ở đoạn mã dưới đây nha:

HTML

<div class="container">
     <!--Header-->
     <header>
         <nav>
             <div class="logo">Niềm Vui Lập Trình</div>
             <div class="menu">
                 <ul>
                     <li><a href="#"> <i class="fa fa-home" aria-hidden="true"></i> Trang Chủ</a></li>
                     <li><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> Dịch Vụ</a></li>
                     <li><a href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Dự Án</a></li>
                     <li><a href="#"> <i class="fa fa-map" aria-hidden="true"></i> Thông Tin</a></li>
                     <li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> Liên Lạc</a></li>
                 </ul>
             </div>
         </nav>
     </header>
     <!--Header-->
     <!--Nội Dung-->
     <div class="noi_dung">
         <p>Lorem ipsum dolor sit amet consectetur...</p>
         <p>Lorem ipsum dolor sit amet consectetur...</p>
         <p>Lorem ipsum dolor sit amet consectetur...</p>
         <p>Lorem ipsum dolor sit amet consectetur...</p>
     </div>
     <!--Nội Dung-->
 </div>

Và kết quả bạn xem hình ảnh bên dưới nhé:

Thiết Lập Các Style Cơ Bản Cho Thanh Tiêu Đề

Trong phần này chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để xác định vị trí, font chữ, hình nền... cho thanh tiêu đề bằng đoạn mã dưới đây nhé:

CSS

html, body{
     padding: 0;
     margin: 0;
     width: 100%;
 }
body{
     font-family: 'Roboto', sans-serif;
 }
header{
     width: 100%;
     height: 100vh;
     background: url(https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
     no-repeat 50% 50%;
     background-size: cover;
     background-attachment: fixed;
 }

Ở đoạn code trên mình có một lưu ý nhỏ là thuộc tính background: url(...) no-repeat 50% 50%; là cách viết tắt của:

background-image: url(...);
background-repeat: no-repeat;
background-position: 50% 50%;

Ngoài ra còn có một thuộc tính mà mình muốn nói tới là background-attachment: fixed;. Nó có nhiệm vụ cố định phần tử khi trang được scroll. Để hiểu rõ hơn bạn xem video sau nhé:

Thiết Lập Style Cho Header Và Logo Của Thanh Tiêu Đề

Trong phần này chúng ta sẽ dùng CSS để chỉnh lại vị trí của thẻ header và trang trí lại logo trong navigation bằng đoạn mã dưới đây nhé:

CSS

.noi_dung{
     width: 100%;
     margin: 4em auto;
     font-size: 20px;
     line-height: 30px;
     text-align:justify;
 }
.logo{
     position: fixed;
     float: left;
     margin: 16px 36px;
     color: #fff;
     font-weight: bold;
     font-size: 24px;
 }
nav{
     position: fixed;
     width: 100%;
 }
nav ul {
     list-style: none;
     background: rgba(0,0,0, 0);
     overflow: hidden;
     color: #fff;
     padding:0;
     text-align: center;
     margin: 0;
     transition: 1s;
 }

Và kết quả bạn xem hình ảnh bên dưới nhé:

Trang Trí Lại Đường Dẫn Trong Navigation

Trong phần này chúng ta sẽ đi vào trang trí và thiết lập các đường dẫn hiển thị liền kề với nhau bằng thuộc tính display: inline-block; trong CSS thông qua đoạn mã dưới đây nhé:

CSS

nav ul li{
     display: inline-block;
     padding: 20px;
 }
nav ul li a{
     text-decoration: none;
     color: #fff;
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing:  2px;
 }

Và kết quả bạn xem hình ảnh dưới đây nha:

Thiết Lập Hiệu Ứng Cho Sticky Navigation

Trong phần này chúng ta sẽ sử dụng Jquery để thay đổi background(màu nền) của sticky navigation khi người dùng scroll xuống trang nhé!

CSS:

nav.black ul{
     background: #000;
     box-shadow: 0 1px 1px rgba(0,0,0,0.12),
               0 2px 2px rgba(0,0,0,0.12),
                0 4px 4px rgba(0,0,0,0.12),
               0 8px 8px rgba(0,0,0,0.12),
               0 16px 16px rgba(0,0,0,0.12);
 }

Javascript

$(window).scroll(function () {
     if ($(window).scrollTop()) {
         $("nav").addClass("black");
     } else {
         $("nav").removeClass("black");
     }
 })

Ở đây mình có một lưu ý nhỏ trong đoạn mã Jquery là:

Khi người dùng scroll trang web xuống thì class .black sẽ được tự động thêm vào phần tử nav. Ngược lại thì nó sẽ tự động xóa class .black

Và kết quả cuối cùng bạn xem video dưới đây nhé:

Còn dưới đây là dự án trên Codepen nha:

See the Pen Tạo Sticky Navigation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức tạo sticky navigation hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!