Вертикальная липкая навигация Меню выбирает неправильную ссылку при спуске

Question

Я следую этому руководству, чтобы создать пользовательское липкое меню навигации с прокруткой.

• http://webdesign.tutsplus.com/tutorials/create-a-sticky-navigation-header-using-jquery-waypoints--webdesign-6408

Я использую следующие JQuery плагинов:

• Waypoints: http://imakewebthings.com/jquery-waypoints/
• scrollTo: https://github.com/flesler/jquery.scrollTo

При нажатии на ссылки, то скроллинг работает желательно; Однако; класс .selected не применяется правильно к ссылке меню при нажатии и направление вниз.

Например:

• Пункт меню 1
• Пункт меню 2
• Пункт меню 3

При загрузке страницы, Menu item 1 выделен с классом .selected .

Когда мы нажимаем на Menu item 2, прокрутка происходит, но подсветка этого не делает.

Теперь, если мы нажмем на Menu item 3 скроллинг происходит и Menu item 2 подсвечивается вместо Menu item 3

на это код, я использую:

<nav class="section-navigation"> 
    <ul> 
     <li><h5><a href="#item-1">item A</a></h5></li> 
     <li><h5><a href="#item-2">item B</a></h5></li> 
     <li><h5><a href="#item-3">item C</a></h5></li>   
     <li><h5><a href="#item-4">item D</a></h5></li> 
    </ul> 
</nav> 

<div class="section-content" id="item-1">some content for this section</div> 
<div class="section-content" id="item-2">some content for this section</div> 
<div class="section-content" id="item-3">some content for this section</div> 
<div class="section-content" id="item-4">some content for this section</div> 

---

jQuery('.section-navigation').waypoint('sticky', { 
    offset: 90 // Apply "stuck" when element 30px from top 
}); 

jQuery(function() { 
    var sections = jQuery('.section-content'); 
    var navigation_links = jQuery('nav a'); 

    sections.waypoint({ 
    handler: function(event, direction) { 
     var active_section; 
     active_section = jQuery(this); 

     if (direction === "up") active_section = active_section.prev(); 

     var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.closest('li').removeClass("selected"); 
     active_link.closest('li').addClass("selected"); 

    }, 
    offset: '-20px' 
    }); 

    jQuery('nav a[href^="#"]').on('click', function(event) { 
    event.preventDefault(); 
    jQuery.scrollTo(
     jQuery(this).attr("href"), 
     { 
     duration: 200, 
     //offset: { 'left':0, 'top':-0.15*jQuery(window).height() } 
     offset: { 'top':+0.15 } 
     } 
    ); 

    }); 
}); 

Я нашел еще три связанных вопроса, но ни один из них не дал ответа решить мою проблему:

• Waypoints - Sticky Header Navigation. Links Are Highlighted Upon Scrolling Down But Not Scrolling Up
• jquery waypoints hilighting navigation
• jQuery Waypoints sticky nav when scrolling up via a click is 1px off

Пожалуйста, помогите мне в решении этого. Спасибо.

EDIT: Вот скрипку: http://jsfiddle.net/uteqm28v/2/

Answer 1

После стучал головой к стене, я наконец-то исправили код, который я имел. Это было очень простое решение.

Мне просто нужно было удалить event из обработчика и установить offset на такое же количество пикселей (они могут быть противоположными, один положительный и один отрицательный).

Вот рабочая скрипку http://jsfiddle.net/uteqm28v/5/

И код:

$('.section-navigation').waypoint('sticky', { 
    offset: 30 // Apply "stuck" when element 30px from top 
}); 

jQuery(function() { 
    var sections = jQuery('.section-content'); 
    var navigation_links = jQuery('nav a'); 

    sections.waypoint({ 
    handler: function(direction) { 
     var active_section; 
     active_section = jQuery(this); 

     if (direction === "up") active_section = active_section.prev(); 
     var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.closest('li').removeClass("selected"); 
     active_link.closest('li').addClass("selected"); 

    }, 
    offset: '20px' //this can be negative 
    }); 

    jQuery('nav a[href^="#"]').on('click', function(event) { 
    event.preventDefault(); 
    jQuery.scrollTo(
     jQuery(this).attr("href"), 
     { 
     duration: 200, 
     //offset: { 'left':0, 'top':-0.15*jQuery(window).height() } 
     offset: { 'top':20 } 
     } 
    ); 

    }); 
}); 

Answer 2

Попробуйте этот код

• Рабочая JsFiddle Demo here

`

$('.section-navigation').waypoint('sticky', { 
    offset: 30 // Apply "stuck" when element 30px from top 
}); 
var previousScroll = 0; 
var drctn = ''; 
var linkClk = false; 
(function() {  
    $(window).scroll(function() { 
     var currentScroll = $(this).scrollTop(); 
     if (currentScroll > previousScroll){ 
      drctn='down';   
     } 
     else { 
      drctn='up';   
     } 
     previousScroll = currentScroll; 
    }); 
}()); 

jQuery(function() { 
    var sections = jQuery('.section-content'); 
    var navigation_links = jQuery('nav a'); 

    sections.waypoint({ 
    handler: function(event, direction) { 
     var active_section; 
     active_section = jQuery(this);  
     if(linkClk){ 
      linkClk=false; 
      if (drctn=='down'){    
       active_section = active_section.next();  
      } 
      var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]'); 


     navigation_links.closest('li').removeClass("selected"); 
     active_link.closest('li').addClass("selected"); 
     } 
     else 
      { 
       if (direction === "up") active_section = active_section.prev(); 

     var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.closest('li').removeClass("selected"); 
     active_link.closest('li').addClass("selected"); 
      } 



    }, 
    offset: '-20px' 
    }); 

    jQuery('nav a[href^="#"]').on('click', function(event) {  
     linkClk = true; 
    event.preventDefault(); 
     //jQuery('nav a').closest('li').removeClass("selected"); 
     //jQuery(this).closest('li').addClass("selected"); 
    jQuery.scrollTo(  
     jQuery(this).attr("href"), 
     { 
     duration: 200, 
     //offset: { 'left':0, 'top':-0.15*jQuery(window).height() } 
     offset: { 'top':+0.15 } 

     } 
    ); 

    }); 
}); 

`

Demo JsFiddle here