Tiêu đề chú ý CSS/JS

Tôi tìm thấy trang web này ngày hôm nay http://www.forward-thinker.co.uk/. Có ai biết làm thế nào để làm cho một tiêu đề dính như thế này.?Tiêu đề chú ý CSS/JS

Nguồn

2011-08-02 DaveS

Firefox + Firebug = tìm hiểu cách thức nó hoạt động –

Hoặc Chrome + Công cụ nhà phát triển – NickAldwin

hoặc Internet Explorer + F12 :-P – 2GDev

Trang web cụ thể đó sử dụng jQuery $(window).scrollevent. Nó sẽ kiểm tra xem phần trên cùng của vùng được cuộn ($(this).scrollTop();) có dưới một độ cao nhất định hay không. Nếu vậy, nó thêm vào css của tiêu đề một lớp có chứa position:fixed (nó cũng thay đổi chiều cao của nó, vì chỉ một phần của cuộn tiêu đề). Nếu vùng cuộn đến gần phía trên cùng, tập lệnh sẽ xóa lớp chứa position:fixed từ css của tiêu đề và thay đổi chiều cao về giá trị ban đầu của nó.

Nguồn

2011-08-02 14:01:13 NickAldwin

Cảm ơn, tôi sẽ thử điều đó. – DaveS

Như một khuyến nghị, tôi sẽ đề nghị chuyển một lớp trên tiêu đề bằng cách sử dụng sự kiện 'scroll'. Giữ CSS nơi nó thuộc về các tệp css. – zzzzBov

@zzzzBov Đề xuất tuyệt vời! Đó thực sự là những gì trang web làm. Đang cập nhật câu trả lời ... – NickAldwin