Ghim một phần khi cuộn

Header đi theo người xem xuống hết trang, thanh "Thêm vào giỏ" nằm sát đáy màn hình cho tới khi cuộn tới phần mô tả. Cả hai là cùng một thiết lập, ở Bảng thuộc tính → Nâng cao → Vị trí, chọn Dính khi cuộn.

Cuộn theo trang, tới mốc bên dưới thì dừng lại và dính ở đó.

Nghĩa là phần tử vẫn nằm đúng chỗ của nó trong trang — chiếm chỗ như bình thường, ai cuộn tới cũng thấy nó ở đó — cho tới khi nó chạm mốc bạn đặt. Từ đó nó đứng yên trên màn hình trong khi phần còn lại của trang trượt qua bên dưới.

Có hai ô đi kèm:

• Ghim vào — Trên hay Dưới. Trên là header. Dưới là thanh mua hàng, thanh khuyến mãi, thanh liên hệ.
• Ô khoảng cách ngay dưới đó là mốc: đặt 0px thì dính sát mép màn hình, đặt 60px thì dừng cách mép 60px — đúng khi bên trên đã có một thanh khác đang ghim rồi.

Còn Thứ tự lớp quyết định phần đang dính nằm trên hay chui xuống dưới thứ khác khi chúng đè lên nhau. Trình dựng điền sẵn giá trị 10 cho bạn khi chọn Dính khi cuộn, vì để trống thì một phần tử ở section bên dưới có thể trượt đè lên header — nhìn y như tính năng bị hỏng. Con số này cố ý thấp hơn giỏ hàng và pop-up, để header không che mất chính cái ngăn kéo nó mở ra. Chỉ cần tăng nếu vẫn còn thứ gì đè lên.

Việc đầu tiên nên kiểm: phần cha có đang cắt nội dung không

Đây là cái bẫy duy nhất của tính năng này, và nó không báo lỗi — bạn chọn Dính khi cuộn, cuộn thử, và không có gì xảy ra cả.

Lý do là kỹ thuật: một phần tử chỉ dính được bên trong vùng cuộn gần nhất của nó. Nếu có phần tử cha nào đang cắt nội dung (thiết lập tràn/overflow ở Nâng cao), thì vùng cuộn của nó chính là cái khung đó — mà khung đó không cuộn, nên phần tử "dính" vào một chỗ không bao giờ trôi.

Trình dựng nói thẳng điều này khi nó xảy ra, ngay dưới ô Vị trí:

Một phần tử cha đang cắt nội dung (overflow), nên phần tử này sẽ không dính.

Thấy dòng đó thì đừng chỉnh tiếp phần đang ghim — đi ngược lên phần cha và bỏ cắt nội dung ở đó.

Đổi dáng vào đúng lúc nó dính

Header lúc nằm yên đầu trang và lúc đang trôi theo người xem không nên trông giống nhau. Lúc dính, nó cần một cái bóng để tách khỏi nội dung bên dưới, và thường nên thấp lại để chừa màn hình cho nội dung.

Sau khi chọn Dính khi cuộn, ngay dưới ô Vị trí xuất hiện một dòng:

Tuỳ chỉnh khi đã ghim →

Bấm vào đó. Hàng Trạng thái ở đầu tab Nâng cao chuyển sang Khi ghim, và từ giây phút ấy mọi thứ bạn chỉnh — Nền, Viền và bóng, Giãn cách, Kích thước, Bố cục, Chữ — chỉ áp dụng cho lúc phần tử đang dính. Dáng bình thường không suy suyển. Bấm lại Mặc định để quay về chỉnh dáng thường.

Canvas hiển thị luôn dáng-khi-dính trong lúc bạn ở trạng thái đó, nên bạn thấy ngay kết quả mà không cần publish rồi cuộn thử.

Hiệu ứng chuyển giữa hai dáng được thêm sẵn: bóng hiện ra và chiều cao thu lại mượt trong khoảng một phần năm giây, chứ không nhảy khựng. Bạn không phải làm gì để có nó — và nếu tự đặt hiệu ứng chuyển riêng thì giá trị của bạn được giữ.

Phần bên trong cũng đổi theo được

Đây là chỗ đáng biết nhất. Không chỉ riêng phần được ghim mới có trạng thái Khi ghim — mọi phần tử nằm bên trong nó đều có.

Chọn logo trong header đã ghim, mở tab Nâng cao, chuyển sang Khi ghim, rồi hạ chiều cao xuống. Kết quả: header cuộn tới đâu vẫn bình thường, tới lúc dính thì logo tự thu nhỏ lại. Cùng cách đó, một dòng slogan có thể biến mất khi ghim để nhường chỗ, còn menu thì giữ nguyên.

Không cần nối gì với nhau cả: phần tử con không cần biết cái gì đang ghim nó, chỉ cần nó nằm bên trong.

Nhớ rằng mỗi khổ màn hình chỉnh riêng

Cả Vị trí lẫn dáng Khi ghim đều theo khổ màn hình, đúng quy tắc lan truyền ở Sửa riêng cho điện thoại.

Hai cách dùng thường gặp:

• Ghim ở máy tính, thả ở điện thoại — trên màn hình nhỏ, một header dính chiếm mất phần đáng kể chỗ đọc. Chuyển sang khổ Điện thoại rồi đổi Vị trí về Theo dòng chảy.
• Ghim ở cả hai, nhưng ở điện thoại thì thu gọn mạnh tay hơn. Chuyển sang khổ Điện thoại, vào Khi ghim, rồi hạ giãn cách và cỡ chữ xuống nữa.

Trang đã publish

Phần được ghim tự biết lúc nào nó đang dính, trên trang thật, không cần bạn cài gì thêm. Nếu bạn không dùng trạng thái Khi ghim thì trang cũng không nặng thêm một chút nào — phần thông minh chỉ được tải về khi thật sự có dáng-khi-dính để hiển thị.