Tạo navbar dính (sticky) với CSS

Để tạo navbar dính, hãy sử dụng thuộc tính position: sticky;. Bạn có thể chạy mã sau để tạo navbar dính:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        position: sticky;
        overflow: hidden;
        top: 0;
        width: 100%;
      }
      li {
        float: left;
        border-right: 1px solid white;
      }
      li a {
        display: block;
        padding: 8px;
        background-color: orange;
      }
      li:last-child {
        border-right: none;
      }
      div {
        padding: 5px;
        margin-top: 5px;
        background-color: white;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Trang chủ</a></li>
      <li><a href="#news">Tin tức</a></li>
      <li><a href="#contact">Liên hệ</a></li>
      <li><a href="#about">Giới thiệu</a></li>
    </ul>
    <div>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
      <p>Thêm văn bản demo để kiểm tra menu dính.</p>
    </div>
  </body>
</html>