scrollTo TweenMax Не останавливается ровно на хеше

Question

У меня проблема с плагином scrollTo (tweenMax). Когда я нажимаю на ссылку меню, веб-сайт переходит к идентификатору раздела, который я выбрал в меню. Но веб-сайт не останавливается при начале раздела, и мне нужно показать h2 (Title).

Мой код

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

В приведенном выше примере, это нормально. Но на моем сайте тот же код плохо работает. На моем веб-сайте есть меню, установленное сверху, оно имеет высоту = 75 пикселей, я положил {scrollTo:{y:topY -75, x:0}, но не работал.

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

Похоже, что вопрос, является ли или нет меню $ фиксируется, когда происходит событие щелчка. Когда вы прокручиваетесь до самого верха, $menu не фиксирован, но после прокрутки вниз бит фиксируется $menu. Причина такого поведения заключается в том, что «фиксированный» $menu удаляется из общего потока веб-страницы, и вычисленное смещение отбрасывается.

С моим решением я создал новую переменную extraOffset, которая проверяет, установлен ли $menu. Если это так, значение равно 75, иначе 0. Сообщите мне, если вы хотите получить дополнительные разъяснения!

Edit: Если вы хотите добавить поддержку для плавной прокрутки на странице загрузки, когда URL имеет #hashtag), вы можете следовать этому примеру: Smooth scroll to anchor after loading new page. Примечание: Возможно, вы захотите, чтобы всегда добавлялось дополнительное смещение, так как ожидается, что $menu будет зафиксирован при прокрутке к контенту.