search

Prinzhorn / skrollr-menu

skrollr plugin for hash navigation
MIT License
285 stars 143 forks source link

negative margin-top #30

Closed xbogdan closed 10 years ago

xbogdan commented 10 years ago

Hi, I don't know if I'm doing it wrong but for me skrollr-menu it's not working. I'm working on a website and I'm using skrollr so I can set negative margin-top when scrolling but hashlink are not working. I used your example and I set "h1 id="awesome" Awesome /h1" to "h1 id="awesome" data-0="margin-top:0px" data-1000="margin-top:-500px" Awesome /h1" but the hashlinks are not working properly.

Prinzhorn commented 10 years ago

but the hashlinks are not working properly.

Well, what are they doing? I can't help you without an example/demo page.

xbogdan commented 10 years ago

I created a repo: https://github.com/xbogdan/skrollrmenu the only thing modified there is the line 30 which has data-0="margin-top:0px" data-1000="margin-top:-500px". My issue is that the hashlink doesn t gets where the h1 is after scroll.

Prinzhorn commented 10 years ago

I recommend reading the documentation (again). It's very short but basically describes what you're asking for https://github.com/Prinzhorn/skrollr-menu#documentation

xbogdan commented 10 years ago

I did read it at least 10 times but I'm missing something. I don t understand what "scale" does.

Prinzhorn commented 10 years ago

Quoting relevant parts

If you animate top, margin-top or anything that moves the element up/down, the browser won't be able to jump to the correct position and you may end up somewhere else

...

in order to fix the problem with the wrong offset, you are able to specify the target scroll position right at the link, e.g. <a href="#section-about" data-menu-top="500">About</a>

Also in your case you could just specify the 500px as offset https://github.com/Prinzhorn/skrollr-menu#offsets

<h1 id="awesome" data-menu-offset="-500" data-0='margin-top:0px' data-1000="margin-top: -500px">Awesome</h1>
xbogdan commented 10 years ago

Yeah my mistake, I thought the plugin calculates where the "container" will be after scroll. The problem is that my website has only one page which is split in 9 containers (one above other) and each container has height set as the window height (depending on monitor resolution etc). So sometimes you scroll more or less to get where you want.

Prinzhorn commented 10 years ago

So sometimes you scroll more or less to get where you want.

But if you always animate the same margin, then it should work fine. Also you can use percentage offsets on the link

<a href="#section-2" data-menu-top="100p">Start of the second section</a>