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

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 9/7/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    812
    Đã được thích:
    70
    Đ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:
    Mã:
    .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

  2. admin

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

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,485
    Đã được thích:
    1,078
    Điểm thành tích:
    113
    Giớ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é:
    Mã:
    .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.
     
    Chỉnh sửa cuối: 26/8/21


Like và Share ủng hộ ITSEOVN