Sticky navigation

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 ?

it’s weird, I am using the latest chrome here.

just tested safari and firefox and they’re fine :frowning:

Is there a way to do this for multiple item? When i run the JS twice for two different items, it only works for the JS run last, and one item doesn’t stick.

Thanks!

1 Like

Is Sticky JS with 2 different elements possible?

Hypies,

I’m trying to get two different elements to stick on different parts of the page. I know there are multiple ways about going about this. o.O
Do I need to create a separate js function and reference it on the same html head? Any help is appreciated… Thx.

1 Like

To have sticky elements like this seems to be something many people need. For me this is very much needed for prototyping.

Are you (the hype team) looking into make this in a simpler way though the Hype UI like you can do in Macaw for example? If so, when can we expect to have this? I understand that you can’t say “tomorrow”, but in a week or in a year?

1 Like

Guys, I used the code below in several projects ( not in Hype) with success, it works!

however I discovered that the same code not work properly in Hype:

ISSUE 1: if you refresh the page the toolbar is hidden and you must scroll the page to show again the navigation. useless to try on CSS ( “! important” or any other way in my tests)

ISSUE 2: bad behavior if you scroll the page more than one time fastly

<style type="text/css"> 
#topnav {top: 300px;}
</style>

<script>
var nav = $('#topnav');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 300) {		
document.getElementById("topnav").style.position = "fixed";
document.getElementById("topnav").style.top = "0px";
		} else {
document.getElementById("topnav").style.position = "absolute";
document.getElementById("topnav").style.top = "300px";
		}
	});
</script>

I think the real problem is to override the styles used by the hype. the code works well mi my test ( not in Hype)