Sticky Nav Bar on every Scene

Scenes
1

How to get this sticky navigation to work on my other scenes? The sticky navBar has Unique Element ID ‘menu’ in the first scene. When I go to the scene ‘Music’ the sticky menu won’t work.

Here is the link to my site:
egmondboon.com/noaboon

All support is much appreciated!

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”,"");
}

};

Thanks,

Egmond

2

as far as i can see your nav doesn’t move at all. so remove the code and apply the class ‘sticky’ to your menu.

btw: your not using a persistant symbol for your nav¿

3

Hi Hans-Gerd,

Thanks for your support. I removed the code and applied the class ‘sticky’ to my menu. Works like a charm. Working on the persistant symbol for my nav now.

4

Hi @h_classen
How can i apply this to the same object but in different layouts ?
Thank you

5

When i made an object sticky on a layout for ipad with your code it works but when i create a new layout for desktop, it doesn't work on it.
So i tried to create a new function for the same object in desktop layout but it doesn't work

6

the above thread is quite old ...

@MaxZieb has done a great integration with multiple options: