scrollTo TweenMax Ne s'arrête pas exactement sur le hachage

Question

J'ai un problème avec le plugin scrollTo (tweenMax), Lorsque je clique sur et le menu lier la diapositive du site à la section ID que j'ai choisi sur le menu. Mais le site ne s'arrête pas au début de la section, et j'ai besoin de montrer le h2 (Titre).

Mon code

$(function(){ 
 
    var wrapper = $("#wrapper"), 
 
    $menu = $("#menu"); 
 

 
    $menu.on("click","li", function(){ 
 
    var $this = $(this), 
 
     href = $(this).find("a").attr("href"), 
 
     topY = $(href).offset().top; 
 

 
     TweenLite.to(window, 2, {scrollTo:{y:topY, x:0}, ease:Cubic.easeIn}); 
 

 
    return false; 
 
    }); 
 

 
});

section{ 
 
    margin-top: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> 
 

 
<div class="wrap"> 
 
    <nav id="menu" class="menu"> 
 
    <ul class="row-centered"> 
 
     <li class="icon-play"><a href="#home">Home</a></li> 
 
     <li class="link-empresa"><a href="#empresa">Link 2</a></li> 
 
     <li class="link-tecnologias"><a href="#tecnologicas">Link 3</a></li> 
 
     <li class="link-cases"><a href="#cases">Link 3</a></li> 
 
     <li class="link-contato"><a href="#contato">Link 4</a></li> 
 
    </ul> 
 
    </nav> 
 
    
 
    <section id="home"><h2>Title 1</h2></section> 
 
    <section id="empresa"><h2>Title 2</h2></section> 
 
    <section id="tecnologicas"><h2>Title 3</h2></section> 
 
    <section id="cases"><h2>Title 4</h2></section> 
 
    <section id="contato"><h2>Title 5</h2></section> 
 
</div>

Dans cet exemple ci-dessus, il est OK. Mais dans mon site le même code ne fonctionne pas bien. Dans mon site il y a un menu fixé sur le dessus, il a une hauteur = 75px, je mets {scrollTo:{y:topY -75, x:0} mais pas travaillé.

Update 1

Project

Answer 1

var extraOffset = $menu.hasClass('fixar') ? 75 : 0; 

TweenLite.to(window, 2, { scrollTo: { y: topY - extraOffset, x: 0 }, ease: Cubic.easeIn }); 

Il semble que la question est de savoir si oui ou non le menu $ est fixé lorsque l'événement se produit un clic. Lorsque vous faites défiler tout en haut, le $menu n'est pas réparé, mais après avoir fait défiler un peu, le $menu devient fixe. La raison de ce comportement est que le "fixe" $menu est supprimé du flux général de la page Web et que le décalage calculé est désactivé.

Avec ma solution, j'ai créé une nouvelle variable extraOffset qui vérifie si le $menu est corrigé. Si c'est le cas, la valeur est fixée à 75, sinon 0. Faites-moi savoir si vous souhaitez plus de précisions!

Edit: Si vous voulez ajouter le support pour le défilement en douceur à la page charge lorsque l'URL a #hashtag), vous pouvez suivre cet exemple: Smooth scroll to anchor after loading new page. Remarque: Vous voudrez probablement toujours ajouter le décalage supplémentaire puisque le devrait être corrigé lors du défilement vers le contenu.