Sticky navigation

So I pulled the group out of the symbol, and can’t seem to get it to work in the group.

Got it fixed, but it still shifts, even as a group not in a symbol. Am I missing something here?

Have you tried to set the class to the elements inside of the group or symbol, not the group or symbol itself

I’m unsure of how to do this. Any help would be greatly appreciated. Thanks!

here’s a sample that has an element inside the symbol and an element outside of the symbol, both elements have a class of .sticky…

test.hype.zip (11.2 KB)

So I should make the class .sticky for the group, and the elements inside?

I think if you set it on the group it will shift to the left, so set the class to just the inner elements

Just tried. Still shifts.

I think you have a javascript that may be interfering as it is setting an attribute “class” on an element???

Here’s my sticky function:

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById(‘menu’);
sPos = el.getBoundingClientRect().top;

window.onscroll=function(){
wY = window.pageYOffset || (document.body.scrollTop || document.documentElement.scrollTop) ;
lastPos.y1 = lastPos.y2; lastPos.y2 = wY;

if(wY >= sPos){
el.style.top = ‘0px’;
el.setAttribute(“class”,“sticky”);
}
if (lastPos.y2 < lastPos.y1 && wY <= sPos){
el.style.top = sPos + ‘px’;
el.setAttribute(“class”,"");
}

};

Here’s the HTML part:

<style>
	.sticky{
	position: fixed !important;
	}
	</style> 

Is there something I should be changing?

try this, sry it’s been night over here :wink:
not fine, but seems to work though :slight_smile:Eat_Concept.hype.zip (3.8 MB)

By jove, I think you’ve done it! What code did you add, if you don’t mind me asking? Thanks SO much for taking the time, as well. :smile:

added a margin auto and removed the left style of the sticky-element.
this may stop working with newer versions of hype …

1 Like

Perfect. Thank you so much! Why do you think it may not work in newer versions?

sticky behaviour or parallax effects are not yet suppported built-in. behaviour on fixed elements has been changing during the last builts … sometimes it worked sometimes not.

Tell me about it. I’m really bummed about the omission of parallax effects. :frowning: Hopefully it’ll get added soon…

This is a pretty long thread and it looks like solutions have been found, but I thought I’d chime in about 3.0.2 vs 3.0.3 for position:fixed.

In 3.0.0-3.0.2 we were applying unnecessary 3D effects to scenes (it was part of having Firefox work correctly with persistent symbols, but that isn’t too important). Most browsers (Chrome, Firefox) do not support 3D elements and position:fixed code together, this is really browser bugs. Safari semi-supported it, but elements were positioned incorrectly. This bug unfortunately wasn’t caught in beta testing, but we fixed it in 3.0.3 by removing the 3D effects on scenes and use a different workaround to fix the original problem the change was intended for. So now position:fixed should generally work and the positioning is based on the viewport as the spec says.

As for scroll events, I’d say that’s probably our most popular request for the release :).

3 Likes

Thank you for the explanation! :smile:

h_classen can you please see why file is behaving weird on first load, once you scroll back to top it gets good but the first time scrolling sometimes the menu does not stick, please help. thanks

it just happens randomly when scrolling fast for the time. please see the attached file
and it can be tested here http://www.munda.com.ar/new-tests/index.html

index.hype.zip (779.8 KB)

This sticks first time for me on load using Safari, what are you using ?