Hướng dẫn how do i make content sticky in css? - làm cách nào để tạo nội dung hấp dẫn trong css?

---

Tìm hiểu làm thế nào để tạo một yếu tố dính với CSS.

---

Hãy tự mình thử »

Lưu ý: Ví dụ này không hoạt động trong Internet Explorer hoặc Edge 15 và các phiên bản trước đó. This example does not work in Internet Explorer or Edge 15 and earlier versions.

---

Yếu tố dính

Thí dụ

div.sticky {& nbsp; & nbsp; vị trí: -webkit -sticky; / * Safari */& nbsp; Vị trí: Sticky; & nbsp; Top: 0;}
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Hãy tự mình thử »

Lưu ý: Ví dụ này không hoạt động trong Internet Explorer hoặc Edge 15 và các phiên bản trước đó.

Yếu tố dính

Thí dụInternet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

div.sticky {& nbsp; & nbsp; vị trí: -webkit -sticky; / * Safari */& nbsp; Vị trí: Sticky; & nbsp; Top: 0;}

Giới thiệu

Bạn có thể đã sử dụng thuộc tính CSS position với các giá trị relative và

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

1 trong quá khứ. Các trình duyệt web hiện đại hiện hỗ trợ giá trị

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

2. Nó cho phép bạn làm cho các yếu tố dính khi cuộn đạt đến một điểm nhất định.

Một yếu tố có

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3 sẽ hoạt động giống như một yếu tố tương đối có vị trí cho đến khi nó đạt đến một điểm được chỉ định và sau đó bắt đầu hành xử giống như một yếu tố có vị trí tĩnh.

Trong bài viết này, bạn sẽ tạo một ví dụ sử dụng

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3 để hiểu cách cư xử và chức năng của nó.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi cùng với bài viết này, bạn sẽ cần:

• Một sự hiểu biết về thuộc tính và giá trị CSS.
• Một trình soạn thảo mã.
• Một trình duyệt web hiện đại hỗ trợ

  .container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    height: 400px;
    background: rgba(114, 186, 94, 0.05);
  }
  
  .shark-1 {
    position: sticky;
    top: 0;
  }
  
  .shark-2 {
    position: sticky;
    top: 4rem;
  }
  
  .shark-3 {
    position: sticky;
    bottom: 1rem;
    align-self: flex-end;
  }
  

  3.

Sử dụng .container { display: flex; justify-content: space-around; align-items: flex-start; border: 2px dashed rgba(114, 186, 94, 0.35); height: 400px; background: rgba(114, 186, 94, 0.05); } .shark-1 { position: sticky; top: 0; } .shark-2 { position: sticky; top: 4rem; } .shark-3 { position: sticky; bottom: 1rem; align-self: flex-end; } 3

Hãy xem xét một thùng chứa

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

7 sẽ là một thùng chứa flex. Được lồng bên trong sẽ là 4 yếu tố

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

7 bổ sung sẽ là các mục Flex. Các yếu tố 4

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

7 sẽ chứa hình ảnh cho position: sticky;0, position: sticky;1, position: sticky;2 và position: sticky;3.

Trong trình soạn thảo mã của bạn, hãy sử dụng đánh dấu sau:

<div class="container">
  <div class="item shark-1">
    <img
      src="/images/punk.png"
      width="100"
      alt="Sammy the Shark with a punk theme."
    >
  div>
  <div class="item shark-2">
    <img
      src="/images/pony.png"
      width="100"
      alt="Sammy the Shark with a magical pony theme."
    >
  div>
  <div class="item shark-3">
    <img
      src="/images/dino.png"
      width="100"
      alt="Sammy the Shark with a dinosaur theme."
    >
  div>
  <div class="item shark-4">
    <img
      src="/images/steampunk.png"
      width="100"
      alt="Sammy the Shark with a steampunk theme."
    >
  div>
div>

Và thêm các kiểu sau:

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

Trong ví dụ này, quy tắc position: sticky;4 trên container Flex rất quan trọng vì nếu không các mục Flex mặc định là giá trị position: sticky;5 trong đó các phần tử sẽ lấy toàn bộ chiều cao của container, hủy hiệu ứng dính.

Lưu ý: Kiểm tra Primer FlexBox của chúng tôi nếu bạn thích làm mới các thuộc tính và giá trị FlexBox khác nhau. Check our flexbox primer if you’d like a refresher on the different flexbox properties and values.

Lưu tệp này và mở nó trong trình duyệt web hiện đại:

Cuộn lên và xuống và quan sát hành vi

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

2. Lưu ý làm thế nào các yếu tố có vị trí dính chỉ dính trong yếu tố cha mẹ của họ.

CẢNH BÁO: Có hai kịch bản phổ biến trong đó một phần tử

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3 sẽ không dính vào cửa sổ như dự định: There are two common scenarios where a

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3 element will not stick to the window as intended:

Không có thuộc tính nào đã được xác định: Đảm bảo phần tử dính có top hoặc bottom. Hoặc trong trường hợp cuộn ngang, left hoặc right.

Một trong những yếu tố của tổ tiên có không tương thích relative2: nếu bất kỳ cha mẹ hoặc tổ tiên nào của yếu tố dính có relative2 được đặt thành relative4, relative5 hoặc relative6. Điều này cũng áp dụng cho relative7 và relative8.

Cá mập thứ nhất và thứ hai có dính so với đỉnh của khối chứa được thiết lập bởi chế độ xem. Cá mập thứ ba có dính so với đáy của khối chứa được thiết lập bởi chế độ xem. Cá mập thứ tư sẽ không cuộn đến một vị trí dính vì nó không được chỉ định

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3.

Sự kết luận

Trong bài viết này, bạn đã tạo một ví dụ sử dụng

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3 để hiểu cách thức hoạt động và chức năng của nó.

Tính đến năm 2020, 95% trình duyệt có một số mức hỗ trợ cho

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

3. Để biết chi tiết, tài liệu tham khảo, tôi có thể sử dụng vị trí CSS: dính. Các phiên bản cũ hơn của Safari sẽ yêu cầu nhà cung cấp fixed2-Prefix. Đảm bảo rằng đối tượng mục tiêu của bạn có thể sử dụng tính năng này trước khi kết hợp nó vào các ứng dụng web của bạn.

Nếu bạn muốn tìm hiểu thêm về CSS, hãy xem trang chủ đề CSS của chúng tôi cho các bài tập và dự án lập trình.

Làm thế nào để bạn làm cho nội dung dính?

Làm thế nào để bạn làm cho một div dính trong CSS?