Làm cách nào để bạn có thể sử dụng jQuery đo lường mức độ người dùng đã cuộn xuống bao xa?

Question

Tôi cần thay đổi kiểu dáng của một phần tử sau khi người dùng đã cuộn xuống ngoài một số lượng pixel nhất định và sau đó thay đổi lại sau khi người dùng cuộn lên. Tôi đang sử dụng jQuery vì vậy tôi muốn sử dụng jQuery nếu có thể. Bất cứ ai có thể cung cấp một ví dụ mà bạn thêm một tên lớp vào một div khi người dùng đã cuộn quá 200 pixel và sau đó loại bỏ tên lớp khi người dùng đã cuộn lại lên tới dưới 200 pixel?

Answer 1

Xem scrollTop, scrollLeft và Events/Scroll.

Ví dụ:

$('div#something').scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     $(this).addClass('foo'); 
    } else { 
     $(this).removeClass('foo'); 
    } 
}); 

Answer 2

này không hoạt động, bởi vì điện thoại di động không chấp nhận .scrollTop() kể từ khi họ sử dụng một khung nhìn để thay thế. Do đó .scrollTop() sẽ luôn bằng 0 trên điện thoại di động. Vẫn đang tìm kiếm giải pháp phù hợp với điều này, nhưng chưa tìm được giải pháp nào.