Css thanh bên dính

 class="wrapper">
   class="main">
    Main content
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

.wrapper {
  display: flex;
  justify-content: space-between;
}

.main,
.sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
}

.main {
  width: 60%;
  height: 150vh;
}

.sidebar {
  width: 25%;
  height: 25vh;
}

body {
  background-color: #ccc;
  font-family: sans-serif;
  padding: 10px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này cho chúng ta hai yếu tố trông như thế này

Lưu ý rằng chiều cao của các thành phần chính và thanh bên được đặt bằng đơn vị vh. 100vh là chiều cao của khung nhìn hiện tại, do đó, việc đặt chiều cao của div chính thành 150vh sẽ mang lại cho nó chiều cao sẽ là 1. 5 lần so với màn hình

Nhưng thanh bên vẫn chưa dính. Khi bạn cuộn xuống trang, thanh bên không theo dõi. Tất cả những gì chúng ta cần làm để khắc phục điều đó là thêm hai dòng CSS

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

(OK, tôi đã nói dối, ba dòng để tương thích với Safari với tiền tố -webkit-. ) Và bạn đã có nó, cuộn xuống trang và thanh bên sẽ dính vào đầu màn hình và theo bạn xuống

Thuộc tính position: sticky yêu cầu phần tử dán vào màn hình, (MDN có thể giải thích điều này tốt hơn tôi) và giá trị top cho phần tử biết vị trí của phần tử so với màn hình khi nó cuộn. Chúng tôi có thể thay đổi điều này thành top: 5% để chừa một khoảng trống, hoặc ví dụ như left: 0, tùy thuộc vào hướng cuộn

Đây là cái tôi đã làm trước đó trên CodePen

Hãy thử thay đổi chiều cao của thanh bên thành 110vh và xem nó dừng ở cuối màn hình như thế nào. Đẹp

Tôi có thể sử dụng vị trí. nếp trong sản xuất?

position: sticky vẫn là một API thử nghiệm, vì vậy hãy thận trọng khi sử dụng. . Luôn cân nhắc xem bạn hỗ trợ trình duyệt nào khi đưa ra quyết định như thế này. Kết hợp thông tin này với caniuse để đưa ra quyết định sáng suốt. Sử dụng số liệu thống kê cho tất cả các trình duyệt trên caniuse chứ không chỉ các phiên bản mới nhất. Hãy tự hỏi, nó sẽ ảnh hưởng như thế nào đến trải nghiệm của người dùng nếu thanh bên không dính?

Như mọi khi, nó phụ thuộc vào ứng dụng cụ thể của bạn và không có câu trả lời nào áp dụng cho mọi tình huống. Nhưng thật tuyệt khi giờ đây chúng tôi có thể xây dựng các tính năng như thế này hoàn toàn bằng CSS và một công cụ hữu ích cần có trong bộ công cụ CSS của bạn