0

I have a problem with plugin scrollTo (tweenMax), When I click on and the menu link the website slide to the section ID that I chose on menu. But the website doesn't stop on begin of the section, and I need to show the h2 (Title).

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

In this example above, it's OK. But in my site the same code not working well. In my website there is a menu fixed on the top, it has a height = 75px, I put {scrollTo:{y:topY -75, x:0} but not worked.

Update 1

Project

deleting
  • 429
  • 1
  • 8
  • 19

1 Answers1

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

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

It appears that the issue is whether or not the $menu is fixed when the click event occurs. When you're scrolled all the way to the top, the $menu is not fixed, but after you scroll down a bit, the $menu becomes fixed. The reason for this behavior is because the "fixed" $menu is removed from general flow of the webpage, and the calculated offset is thrown off.

With my solution, I've created a new variable extraOffset that checks if the $menu is fixed. If it is, the value is set to 75, otherwise 0. Let me know if you'd like further clarification!

Edit: If you want to add support for smooth scrolling on page load when the URL has the #hashtag), you can follow this example: Smooth scroll to anchor after loading new page. Note: You will probably want to always have the extra offset added since the $menu is expected to be fixed when scrolled to content.

Community
  • 1
  • 1
Lasha
  • 581
  • 5
  • 9
  • Awesome!! I'm glad I could help. :) – Lasha Feb 20 '17 at 15:26
  • sorry I thought that was working well, but it's not working yet =/ – deleting Feb 20 '17 at 17:58
  • What's the issue? If you provide more details, I can try to help! – Lasha Feb 20 '17 at 23:16
  • I don't know if this is the problem, but it looks like you added `onAutoKill: scrollTop` to your code which is causing the JS to break, `Uncaught ReferenceError: scrollTop is not defined`. – Lasha Feb 20 '17 at 23:31
  • Hey so check this out! After playing around with your CodePen link, this is what worked for me: `extraOffset = $menu.hasClass('fixar') ? 110 : 200;`. So basically, those 110/200 values are fixed values, so you'll have to update them to match the height of `$menu` (you can set these values dynamically too by using something like `$menu.outerHeight()` – Lasha Feb 21 '17 at 14:38