Đánh dấu liên kết hoạt động khi sử dụng scrollto dựa trên chế độ xem hiện tại

Question

Tôi có một trang web là một trang và người dùng điều hướng đến từng phần bằng liên kết sử dụng plugin cuộn jquery.

Vấn đề của tôi là: Tôi muốn hiển thị liên kết hoạt động trong menu chính. Vì vậy, nếu bạn di chuyển đến dạng liên lạc, liên kết liên lạc sẽ được tô sáng. Bây giờ tôi có thể làm điều này trong jquery bằng cách thêm lớp sau khi nhấp vào. Nếu thực hiện như vậy nếu người dùng di chuyển đến một phần khác theo cách thủ công, liên kết liên hệ sẽ vẫn hoạt động, điều này sẽ không chính xác và gây nhầm lẫn.

Vì vậy, suy nghĩ của tôi sẽ bằng cách nào đó làm việc ra id div hiện đang được xem. Tôi không thực sự hiểu làm thế nào để làm điều đó mặc dù. Bất kỳ ý tưởng?

Answer 1

này nên làm việc cho bạn thêm hướng dẫn di chuyển override:

$(function(){ 
    var sections = {}, 
     _height = $(window).height(), 
     i  = 0; 

    // Grab positions of our sections 
    $('.section').each(function(){ 
     sections[this.name] = $(this).offset().top; 
    }); 

    $(document).scroll(function(){ 
     var pos = $(this).scrollTop(); 

     // Look in the sections object and see if any section is viewable on the screen. 
     // If two are viewable, the lower one will be the active one. 
     for(i in sections){ 
      if(sections[i] > pos && sections[i] < pos + _height){ 
       $('a').removeClass('active'); 
       $('#nav_' + i).addClass('active'); 
      } 
     } 
    }); 
}); 

Demo: http://jsfiddle.net/x3V6Y/