Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Sticky Navbar CSS Và 20 Sticky Navbar Examples

Cách Tạo Sticky Navbar CSS Và 20 Sticky Navbar Examples


Ngày 24 Tháng 1 Năm 2021

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo sticky menu để giúp bạn có thể mang lại cảm giác mới lạ cho người dùng cũng như nâng cao tính thẩm mỹ cho trang web. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Cách Tạo Sticky Menu

Trước khi đi vào tìm hiểu cách tạo component này thì bạn xem qua ví dụ dưới đây đã nhé:

See the Pen LYNpVme by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sau khi bạn đã hiểu cơ chế hoạt động của nó thì việc tiếp theo chúng ta sẽ đi vào tạo cấu trúc HTML cho component này thông qua đoạn mã dưới đây nhé:

HTML

 <div class="tieude">
  <h2>Bạn Hãy Kéo Xuống Bên Dưới </h2>
  <p>Niềm Vui Lập Trình</p>
</div>
  <!--Component Chính (Sticky navbar)-->
<div id="navbar">
   <a href="#trangchu">Trang Chủ</a>
   <a href="#tintuc">Tin Tức</a>
   <a href="#vechungtoi">Về Chúng Tôi</a>
 </div>
<div class="noidung">
  <h3>Ví Dụ Về Sticky Navbar</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Bây giờ chúng ta sẽ sử dụng một số thuộc tính CSS để thiết kế cho sticky navbar nhé:

CSS

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}
/*thiết lập style cho tiêu đề*/
.tieude {
  background-color: DodgerBlue;
  padding: 30px;
  color: white;
  text-align: center;
}
/*Thiết lập style cho navbar*/
#navbar {
  overflow: hidden;
  background-color: #333;
}
/*thiết lập cho đường dẫn trong navbar*/
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/*thiết lập style cho đường dẫn khi hover*/
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
/*thiết lập style cho đường dẫn khi được active*/
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
/*thiết lập style cho nội dung*/
.noidung {
  padding: 16px;
}
/*Class sticky là yếu tố quan trọng trong việc thiết kế stickynavbar*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/*Thêm padding top cho nội dung trang để tránh tình trạng di chuyển nhanh và đột ngột từ người dùng*/
.sticky + .noidung {
  padding-top: 60px;
}

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

See the Pen sticky navbar chua hoan thien by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy thì khi chúng ta scroll chuột xuống thì component không di chuyển theo. Do đó chúng ta sẽ cần dùng đoạn mã Javascript để thiết lập class sticky vào trong đối tượng navbar khi người dùng thực hiện hành động scroll. Điể hiểu rõ hơn bạn xem đoạn mã sau nhé:

/*Chạy Hàm Khi Người Dùng scroll trang web*/
window.onscroll = function() {myFunction()};
/*Lấy phần tử navbar*/
var navbar = document.getElementById("navbar");
/*Lấy Vị Trí offset của navbar*/
var sticky = navbar.offsetTop;
/*thêm hay xóa class sticky dựa vào vị trí scroll của người dùng*/
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

Và kết quả cuối cùng của chúng ta là:

See the Pen LYNpVme by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn tìm hiều từ W3School

Nguồn

Các Ví Dụ Về Sticky Menu Khác

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Tạo Sticky Menu Khi Scroll

Cách Tạo Sticky Menu Khi Scroll

Kết quả bạn xem bên dưới nhé!

See the Pen Scroll To Top Then Fixed Navigation Effect With jQuery and CSS by Bram de Haan (@atelierbram) on CodePen.

Nguồn

Cách Tạo Sticky Navbar Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky nav by kelvin atawura (@katawura) on CodePen.

Nguồn

Cách Tạo Sticky Navigation Khi Scroll

Sticky Navigation Khi Scroll

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Navigation Menu Visible On Scroll by 4gray (@4gray) on CodePen.

Nguồn

Cách Tạo Sticky Menu Jquery

Sticky Menu Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Header by Juicy Mark (@juicymark) on CodePen.

Nguồn

Thiết Kế Jquery Sticky Menu

Jquery Sticky Menu

Kết quả bạn xem bên dưới nhé!

See the Pen StickyHeader by Allen Justin Quinto (@theallenquinto) on CodePen.

Nguồn

Cách Tạo Sticky Bar Menu

Sticky Bar Menu

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Slider Navigation (Responsive) by Ettrics (@ettrics) on CodePen.

Nguồn

Cách Tạo Sticky Menu Icon

Sticky Menu Icon

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Header Visual Trick by Michael (@mintyfloss) on CodePen.

Nguồn

Cách Tạo CSS Sticky Menu

CSS Sticky Menu

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Scrolling Sticky Header by Tommy Hodgins (@tomhodgins) on CodePen.

Nguồn

Cách Tạo Sticky Navigation Bar Khi Scroll

Sticky Navigation Bar Khi Scroll

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Nav Demo by danwarfel (@danwarfel) on CodePen.

Nguồn

Cách Tạo Sticky Navbar CSS Javascript

Sticky Navbar CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.

Nguồn

Cách Tạo Responsive Sticky Navbar

Responsive Sticky Navbar

Kết quả bạn xem bên dưới nhé!

See the Pen Sticky navigation, switching active element by Michael Günther (@Shiaso) on CodePen.

Nguồn

Thiết Kế Sticky Header Navbar CSS Javascript

Sticky Header Navbar CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen fixed header nav by brigi_cs (@brigi_cs) on CodePen.

Nguồn

Thiết Kế Responsive Jquery Sticky Header

Responsive Jquery Sticky Header

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Scroll Header by Dylan Macnab (@DylanMacnab) on CodePen.

Nguồn

Thiết Kế Header Sticky Menu Khi Scroll

Header Sticky Menu Khi Scroll

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive sticky header navigation by MarcLibunao (@MarcRay) 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 những sticky navbar 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ẻ!