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

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

Мой код

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

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

Обновление 1

Проект


javascript html jquery css scrollto
person deleting    schedule 20.02.2017    source источник
comment
У вас есть URL-адрес веб-сайта, над которым вы работаете? Было бы очень полезно увидеть именно то, о чем вы говорите. Ваше решение с -75 должно технически работать. Спасибо!   -  person Lasha    schedule 20.02.2017
comment
@Lasha Обновление 1 выше. Спасибо   -  person deleting    schedule 20.02.2017
comment
У меня есть решение прямо сейчас. Это связано с тем, фиксируется ли меню в момент щелчка! Один момент, пожалуйста...   -  person Lasha    schedule 20.02.2017
comment
ОК жду... Спасибо @Lasha   -  person deleting    schedule 20.02.2017

Ответы (1)


arrow_upward
1
arrow_downward 

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

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

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

В моем решении я создал новую переменную extraOffset, которая проверяет, исправлено ли $menu. Если это так, значение устанавливается равным 75, в противном случае — 0. Дайте мне знать, если вам нужны дополнительные разъяснения!

Изменить. Если вы хотите добавить поддержку плавной прокрутки при загрузке страницы, когда URL-адрес имеет #хэштег), вы можете следовать этому примеру: Плавная прокрутка до привязки после загрузки новой страницы. Примечание. Возможно, вы захотите всегда добавлять дополнительное смещение, поскольку ожидается, что $menu будет исправлено при прокрутке до содержимого.

person Lasha    schedule 20.02.2017
comment
Потрясающий!! Я рад, что смог помочь. :) - person Lasha; 20.02.2017
comment
извините, я думал, что это работает хорошо, но это еще не работает =/ - person deleting; 20.02.2017
comment
В чем проблема? Если вы предоставите более подробную информацию, я могу попытаться помочь! - person Lasha; 21.02.2017
comment
Я не знаю, в этом ли проблема, но похоже, что вы добавили onAutoKill: scrollTop в свой код, что приводит к поломке JS, Uncaught ReferenceError: scrollTop is not defined. - person Lasha; 21.02.2017
comment
Эй, проверьте это! Поигравшись с вашей ссылкой на CodePen, у меня сработало следующее: extraOffset = $menu.hasClass('fixar') ? 110 : 200;. Таким образом, в основном эти значения 110/200 являются фиксированными значениями, поэтому вам придется обновить их, чтобы они соответствовали высоте $menu (вы также можете установить эти значения динамически, используя что-то вроде $menu.outerHeight() - person Lasha; 21.02.2017