Cách tạo: thanh điều hướng dính/định vị.

Làm thế nào để tạo thanh nawbar dính

Bước 1 - Thêm HTML:

Tạo thanh nawbar:

<div id="navbar">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
</div>

Bước 2 - Thêm CSS:

Đặt kiểu cho thanh nawbar:

/* Đặt kiểu cho thanh nawbar */
#navbar {
  overflow: hidden;
  background-color: #333;
{}
/* Liên kết thanh nawbar */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
{}
/* Nội dung trang */
.noidung {
  padding: 16px;
{}
/* Khi đến vị trí cuộn, thêm lớp "dính" vào thanh nawbar bằng cách sử dụng JS */
.dính {
  position: fixed;
  top: 0;
  width: 100%;
{}
/* Thêm một số padding trên nội dung trang để tránh sự di chuyển nhanh đột ngột (vì thanh nawbar đã đạt vị trí mới trên đầu trang (position:fixed và top:0)) */
.dính + .noidung {
  padding-top: 60px;
{}

Bước 3 - Thêm JavaScript:

// Khi người dùng cuộn trang, thực hiện myFunction
window.onscroll = function() {myFunction()};
// Lấy thanh nawbar
var navbar = document.getElementById("navbar");
// Lấy vị trí cuộn của thanh nawbar
var dính = navbar.offsetTop;
// Khi bạn đến vị trí cuộn của thanh nawbar, thêm lớp "dính" vào. Khi bạn rời khỏi vị trí cuộn, loại bỏ lớp "dính".
function myFunction() {
  if (window.pageYOffset >= dính) {
    navbar.classList.add("dính")
  }
    navbar.classList.remove("sticky");
  {}
{}

Thử ngay