Menu suddenly fixed to bottom

1

I have a menu which is fixed to the top of the page. It worked very well, but no all of the sudden it is fixed to the bottom of the page. Here is a download link to my document https://we.tl/j4EnQVlnSV
The function I’m working with is the following:
´´´

menuToFixed = hypeDocument.getElementById('menu');

window.onscroll = function() {
	if (scrollY > 245) {
	    menuToFixed.style.position = "fixed";
	    menuToFixed.style.top = "0px";
	  	} else {
	  	menuToFixed.style.position = "absolute";
	  	menuToFixed.style.top = "245px";
	  	menuToFixed.style.left = "auto";
	  	menuToFixed.style.right = "auto";
	}
}

´´´
Even if I try to change the settings it doesn’t change the menu’s position. I don’t know what to change and am a little bit desperate cause it is a project for my studies which I have to present tomorrow. Maybe someone could help me :slight_smile:

2

Use the Hype API instead.

hypeDocument.setElementProperty(menuToFixed, 'top', 0)

and

hypeDocument.setElementProperty(menuToFixed, 'top', 245)

These will work better. The position changes on scroll to the correct px

But I think there is another issue with how things are setup. As when I load the page the menu ( pink bar) is at the bottom of the green box.? (800px)

Not sure why you have this set up with the menu starting at 800px and then moving to the 245px position??

I would think you would want it to return to the 800px

hypeDocument.setElementProperty(menuToFixed, 'top', 800)

1 Like
3

Oh sorry, the 245px position was the code someone made for me. I changed the position afterwards to where I needed it. But when it started to don’t work any more I tried to use the original function again to make it work.

1 Like
4

Ok. Then using the Hype API will sort your issue out.

5

It worked! Thank you so much, you just saved the lives of three students :slight_smile:

1 Like