Question

tôi có mã như dưới đây:

<div id="container"> 
<div class="item" id="1">blah blah</div> 
<div class="item" id="2">blah blah 2</div> 
</div> 

Nhưng trên thực tế có rất nhiều và rất nhiều với class = 'mục'.

Về cơ bản khi người dùng cuộn danh sách các mục tuyệt vời này, tôi muốn thay đổi kiểu dáng của mặt hàng hiển thị trên cùng hiện tại (như trình đọc google!). Đã xem xét xung quanh cho giải pháp trong javascript jquery hoặc đồng bằng nhưng dường như không thể tìm thấy một. Ai có ý tưởng gì không?

Cảm ơn

Đánh dấu

Answer 1

Nếu yếu tố của bạn không phải là cùng một chiều cao, bạn có thể lặp qua chúng trên cuộn:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    $('.item').removeClass('top').each(function() { 
     if ($(this).offset().top > cutoff) { 
      $(this).addClass('top'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

Nếu đây là quá chậm, bạn có thể bộ nhớ cache $ ('mục'). Offset(). vào một mảng, thay vì gọi hàm offset() mỗi lần.

Answer 2

Bạn có thể tạo cuộn của riêng bạn sử dụng javascript.

Nó không phải là ý tưởng rất thiết thực nhưng bạn có thể thử.

Và đặt liên kết tới hình ảnh mô tả tốt hơn. Nó sẽ rất hữu ích.

Answer 3

Dưới đây là một ý tưởng khác, dựa trên các hàm javascipt dựng sẵn.

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself) 
var element = range.startContainer.parentNode; // this an upper onscreen element 

chút mã này không phải là một sản phẩm sẵn sàng để sử dụng - nó chỉ là ví dụ, mà chỉ hoạt động trong các trình duyệt webkit. Nếu bạn muốn sử dụng nó, bạn nên google cho tương đương trình duyệt chéo của caretRangeFromPoint()