I'm using the tweenmax scrollTo effect, however I'm having a problem, the site is composed of a few sections each has an id that I use for anchor in scrollTo.
When I click on the menu, the site will scroll down to the section that I selected, but it goes beyond the start of the section, getting over h2.title
and when I'm under that section and clicking on it to slide it up. site does not stop at the same place that stopped when it descends. (strange because the anchor is the same)
The code I use is this:
$(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;
});
});
I tried to use y:topY -70
for example but it did not work, it up -70px up but did not solve my problem.
It would solve if it respected exactly the beginning of the section.
Updated:
HTML looks something like this:
<div class="wrap">
<nav>
<ul>
<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>
</nav>
<section id="section-1"> Conteudo 1</section>
<section id="section-2"> Conteudo 2</section>
<section id="section-3"> Conteudo 3</section>
</div>
Update 2
The menu when it hits the top of the browser is fixed at the top, it is 70px high, so I put y:topY -70
to discount, but tb n was cool, but if I take the fixed menu it works legal. oO
Update 3 - Fixed Menu
// Menu fixo top
var offset = $('#menu').offset().top;
var $meuMenu = $('#menu');
$(document).on('scroll', function () {
if (offset <= $(window).scrollTop()) {
$meuMenu.addClass('fixar');
} else {
$meuMenu.removeClass('fixar');
}
});
Update 4 Follow the link to see in practice the error, thank you.