jQuery scrollTo ограничение для детей

Question

Я играю с помощью jQuery scrollTo, пытаясь сделать гладкий сайт прокрутки с полными разделами тела. Прокрутки и переходы работают отлично, за исключением того, когда вы прокрутки вверх от первой секции, скрипт подсвечивает панель навигации в разделе, вместо того, чтобы остаться в разделе 1.

Пример: http://jsfiddle.net/8jh3qt5c/2/

Вот как СЧА выглядит следующим образом:

<div id="header"> 
    <ul id="nav"> 
    <li><a href="#section-1">Section 1</a> 
    </li> 
    <li><a href="#section-2">Section 2</a> 
    </li> 
    <li><a href="#section-3">Section 3</a> 
    </li> 
    </ul> 
</div> 

И вот scroll.js:

var $current, flag = false; 

$(function() { 
$('#nav').onePageNav(); 

$('body').mousewheel(function(event, delta) { 
    if (flag) { return false; } 
    $current = $('div.current'); 

    if (delta > 0) { 
     $prev = $current.prev(); 

     if ($prev.length) { 
      flag = true; 
      $('body').scrollTo($prev, 500, { 
       onAfter : function(){ 
        flag = false; 
       } 
      }); 
      $current.removeClass('current'); 
      $prev.addClass('current'); 
     } 
    } else { 
     $next = $current.next(); 

     if ($next.length) { 
      flag = true; 
      $('body').scrollTo($next, 500, { 
       onAfter : function(){ 
        flag = false; 
       } 
      }); 
      $current.removeClass('current'); 
      $next.addClass('current'); 
     } 
    } 

    event.preventDefault(); 
}); 

}); 

я могу Кажется, вы нашли способ исключить панель навигации из прокрутки, поэтому, когда на первой панели прокрутка вверх не будет иметь никакого эффекта.

Также, когда вы обновляете страницу в нижней части, есть способ сбросить текущий видимый раздел к первому, так как прямо сейчас окно остается на том, что было текущим.

Любая помощь была бы принята с благодарностью!

Answer 1

Вы не проверяете, остаются ли предыдущие и следующие действительные элементы. Вот лучший подход, не проверенный, если есть какая-то небольшая проблема.

$(function() { 
    $('#nav').onePageNav(); 

    $('body').mousewheel(function(event, delta) { 
    event.preventDefault(); 

    var $current = $('div.current'); 
    if ($current.is(':animating')) return; 

    var $next = delta > 0 ? $current.prev() : current.next(); 
    if (!$next.hasClass('section')) return; 

    $current.removeClass('current'); 
    $next.addClass('current'); 
    $(window).scrollTo($next, 500); 
    }); 
}); 

Кстати, если вы используете scrollTo, это своего рода отходов использовать onePageNav. Вы можете сделать то же самое, включив localScroll, который использует scrollTo и не переопределяет все это.

В качестве альтернативы, вы можете реализовать его в ближайшее время, как это:

// Bind to the click of all links with a #hash in the href 
$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 
    $(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:true}); 
});