jQuery scrollTo limite aux enfants

Question

Je suis en train de jouer avec jQuery scrollTo, en essayant de faire un site de défilement lisse avec des sections de corps complet. Le défilement et les transitions fonctionnent très bien, sauf lorsque vous faites défiler à partir de la première section, le script met en avant le panneau de navigation en tant que section, au lieu de rester sur la section 1.

L'exemple: http://jsfiddle.net/8jh3qt5c/2/

Voici comment la navigation ressemble à:

<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> 

Et voici les 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(); 
}); 

}); 

je peux Ne semblez pas trouver un moyen d'exclure le panneau de navigation du défilement, ainsi quand sur le premier panneau, le défilement vers le haut n'aura aucun effet. En outre, lorsque vous actualisez la page sur une section inférieure, il est possible de réinitialiser la section visible en cours à la première, car la fenêtre reste à ce moment là, quelle qu'elle soit.

Toute aide serait grandement appréciée!

Answer 1

Vous ne vérifiez pas si les éléments prev et next sont toujours valides. Voici une meilleure approche, n'ont pas testé ajuster s'il y a un petit problème.

$(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); 
    }); 
}); 

BTW, si vous utilisez scrollTo, il est un peu un gaspillage d'utiliser onePageNav. Vous pouvez faire de même en incluant localScroll qui utilise scrollTo et ne réimplémente pas le tout.

Vous pouvez la mettre en œuvre peu comme ceci:

// 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}); 
});