Hướng dẫn sticky css not working

There could be a number of reasons why the CSS position: sticky property might not be working for you. You can check the following list of things to fix some common / potential issues with using it:

1. Checking for Browser Compatibility;
2. Checking if a Threshold Has Been Specified;
3. Checking Vendor Prefix for Safari;
4. Checking if an Ancestor Element Has overflow Property Set;
5. Checking if height Property Is Not Set on Parent;
6. Checking if a Parent Element Is a Flexbox.

Checking for Browser Compatibility

Before you check for other issues, it might be a good idea to ensure that you're using a browser that supports position: sticky.

Checking if a Threshold Has Been Specified

A sticky element requires a threshold to be specified, which means that you must set a value other than "auto" for at least one of the following properties:

• top
• right
• bottom
• left

For example:

.sticky {
    position: sticky;
    top: 0;
}

This threshold value that you set, would make the sticky element act as fixed positioned when it crosses the specified threshold, and a relatively positioned element otherwise.

Checking Vendor Prefix for Safari

Make sure you add a vendor prefix for the property value to support versions of Safari below 13, for example, like so:

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

Checking if an Ancestor Element Has overflow Property Set

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won't work (unless you specify a height on the overflowing container):

1. overflow: hidden
2. overflow: scroll
3. overflow: auto

Snippet to Check for Parents With overflow Property Set:

Simply copy/paste the following snippet in your browser's web developer console to identify all parent elements with overflow property set to something other than visible:

let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

How to Make position: sticky Work With the overflow Property?

By specifying a height on the overflowing container, you should be able to make position: sticky work whilst having the container element have the overflow property set.

Checking if height Property Is Not Set on Parent

If the parent element has no height set then the sticky element won't have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a container.

Checking if a Parent Element Is a Flexbox

If sticky element's parent is a flexbox, there are two scenarios to check for:

1. The sticky element has align-self: auto set (which is the default);
2. The sticky element has align-self: stretch set.

If the Sticky Element Has align-self: auto Set:

In this case the value of align-self would compute to the parent's align-items value. So, if the parent has align-items: normal (which is the default) or align-items: stretch set, then it means the height of the sticky element would stretch to fill the entire available space. This would leave no room for the sticky element to scroll within the parent.

If the Sticky Element Has align-self: stretch Set:

In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.

How to Make Sticky Element Scrollable Within a Flexbox:

You could simply set the value of the align-self property to align-self: flex-start. This would put the sticky element at the start and won't stretch it.

Hope you found this post useful. It was published 26 Apr, 2020 (and was last revised 26 Jan, 2022). Please show your love and support by sharing this post.

1. 

   seolagi Moderator

   Thành viên BQT

   Tham gia ngày:16/4/14Bài viết:936Đã được thích:77Điểm thành tích:28

   Hi mọi người cho mình hỏi cái "position: sticky" của mình không hiểu sao nó không chạy, không hoạt động, nó không stick lên trên top như mình cần. Trong khi mình làm giống y chang các lần khác thì nó lại stick, còn mình khai báo cái slider bar bên hông web, khi nó kéo xuống tới 1 điểm nhất định sẽ add 1 cái calss sticky vào, mà cái class này có add vào nhưng cái "position: sticky" lại không gim lên top

   

   .

   Code CSS của mình:

   .sticky {
       position: sticky;
       position: -webkit-sticky;
       top: 50px;
   }

   Ý nghĩa của code: nó sẽ gim lên top 1 khoảng 50px. Nhưng nó không có gim mà cứ bình thường chìm lên trên lun

   

   (

   Cảm ơn đã xem bài:

   Sửa lỗi: "position: sticky" không hoạt động, "position: sticky" not working

   Lượt xem: 1,020 - Xem Bài Viết Cùng Chủ Đề

3. 

   admin Phạm Công Sơn Thành viên BQT

   Tham gia ngày:22/5/13Bài viết:4,604Đã được thích:1,129Điểm thành tích:113Giới tính:Nam

   Chắc là thuộc tính cha của nó, lớp class parent chưa khai báo đúng thôi bạn. Bạn add thêm code sau vào parent lớp class cha của cái sticky của bạn như sau nhé:
   

   .parent {
       display: flex;
       justify-content: space-around;
       align-items: flex-start;
       overflow: visible;
   }
   
   .sticky {
       position: sticky;
       position: -webkit-sticky;
       top: 0;
   }

   • parent: là class cha của class sticky

   Nếu còn lỗi, bạn phải tìm ở các class cha xóa hết overflow: hidden; đi, hoặc thay đổi thuộc tính của overflow: hidden; cho phù hợp ở các class cha.

Like và Share ủng hộ ITSEOVN