Sử dụng jQuery để tìm phần tử hiển thị hiện tại và cập nhật điều hướng

Question

Người dùng lần đầu tại đây. Tôi thường có khả năng tìm câu trả lời cho các câu hỏi nhưng tôi đang gặp khó khăn trong việc tìm ra câu trả lời này.

Mục tiêu:

Tôi có một bố cục trang duy nhất với một navigation sidebar mà khi nhấp vào sẽ di chuyển xuống một yếu tố trên trang. Tuy nhiên, nếu người dùng chỉ cuộn xuống trang đến một phần tử cụ thể #id Tôi muốn liên kết tương ứng trong điều hướng trở thành .active. Liên kết điều hướng và phần tử tương ứng chia sẻ cùng một giá trị qua element#id và a[name].

Tương tự như:NikeBetterWorld.com

HTML Ví dụ dưới đây:

<nav> 
    <a name="value">Link</a> 
</nav> 

<section id="value"> 
    content goes here 
</section> 

Rõ ràng, có nhiều bộ phận, liên kết, các yếu tố, vv Tuy nhiên, đây là ý chính của nó. Vì vậy, khi người dùng cuộn xuống section#value, a[value] sẽ có được lớp đang hoạt động.

Tôi đã tìm thấy câu trả lời ở đây trước đó đã giúp phần nào nhưng tôi vẫn gặp một số vấn đề. See this link for more information.

hiện Javascript/jQuery:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    var cutoffRange = cutoff + 200; 

    // Find current section and highlight nav menu 
    var curSec = $.find('.current'); 
    var curID = $(curSec).attr('id'); 
    var curNav = $.find('a[name='+curID+']'); 
    $(curNav).addClass('active'); 

    $('.section').each(function(){ 
     if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) { 
      $('.section').removeClass('current') 
      $(this).addClass('current'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

Vấn đề:

Mặc dù mã trên hoạt động đến một mức độ nào đó tôi chạy vào một vấn đề lớn. Tôi gặp sự cố khi tải toàn bộ yếu tố để giữ nguyên .current. Nếu phần trên cùng của phần tử đi ra ngoài cửa sổ, nó sẽ mất lớp. Tôi đã khắc phục điều đó bằng cách thêm một phạm vi cho các phần tử mới, nhưng bây giờ khi người dùng cuộn lên trên phần tử trước đó sẽ không đạt được lớp .current cho đến khi phần tử đầu tiên đạt đến đỉnh của cửa sổ. Tôi muốn nó nếu một phần chi phối của cửa sổ, khi nhìn thấy, đã đạt được các lớp học .current.

Bất kỳ trợ giúp, ý tưởng hoặc đề xuất nào sẽ được đánh giá cao.

Cảm ơn trước!

Answer 1

Có vẻ như bạn muốn kiểm tra cạnh dưới của phần chứ không phải trên cùng. Hãy thử điều này và loại bỏ phạm vi tất cả cùng nhau:

if($(this).offset().top + $(this).height() > cutoff){ 

EDIT: Đã tạo một fiddle. Tôi nghĩ rằng đây là những gì bạn đang mô tả.

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh! có giải pháp!

tôi chỉ cần thay đổi từ:

if ($(window).scrollTop() >= $(section).offset().top) { 

để

if ($(window).scrollTop() + 80 >= $(section).offset().top) { 

Answer 3

tôi luôn luôn sử dụng jQuerys "bộ lọc" chức năng để trả lại phần hiện tại.

$currSection = $('section').filter(function() { 
    var $this = $(this); 
    var offset = $this.offset().top; 
    var view = winHeight/2; 

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop; 
}); 

Wrap nó trong một người biết lắng nghe cuộn như:

$(window).on('scroll', function() { 
    // here we go ... 
}); 

Thats nó.