Sticky navigation starting at special point

scrolling

(Melina Kiefer) #1

Hello there!
Sorry if my English is not perfect, I’m from Germany.
I’ve been working with Hype for two months now, working on my bachelor project. Now my question: I added a sticky navigation to my website which appears at the top of the page as soon as the page is fully loaded. So far, so good. But I would prefer the navigation to appear later on the page when you scroll down, like in this example:
-> http://www.itsmassive.com

So far I worked with this code:

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById('header');
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 && c){
c = false;
el.style.top = '0px';
el.setAttribute("class","sticky");
}

if (lastPos.y2 < lastPos.y1 && wY <= sPos && !c){
c = true;
el.style.top = sPos + 'px';
el.setAttribute("class","");
}

}; 

I already tried to change the positions but as I’m not that used to coding it didn’t work out the way I wanted it to - means: after I changed the positions it didn’t work out at all anymore, the navigation appeared on top but was not sticky anymore.
Maybe someone can tell me what I have to change to make it work?
I would be so grateful! :grin:

PS: I added the original sticky navigation file
sticky-nav.hype.zip (211.3 KB)

somehow adding a zip of my .hype document isn’t possible… I can upload it, but as soon as it is at 100% it isn’t shown anymore… don’t know what I’m doing wrong here…


(Jonathan Deutsch) #2
  • It’d be useful to attach a zip of your .hype document, that way anyone helping does not need to recreate the page with assumptions that may be built into your code.
  • It’d be good to elaborate on “didn’t work out the way I wanted it to” as we won’t know what you may be going for either.
  • if that code comes from a specific source it’d be good to link to that
  • small note: when posting code on the forums, generally you’ll want to surround it in a triple-tick ( ``` ) block so that it retains its originally formatting

(Melina Kiefer) #3

Thanks for your advices, I will change my post and add the infos :slight_smile:


#4

@melimascella

Hi Melina!

I already created the following before You posted an example… if there is something here You can use great!

Hype Demo project: Scrolling - movable FixedMenu_JHSv3.hype.zip (25.6 KB)

I went for a simple approach and started from scratch rather than adjust your code. All the work is done in the Demo by the function “scrollToFixedMenu” (which follows).

I use “scrollY” to establish where we are on the page (like your use of “scrollTop”) and if we go above (or under) a certain number then we set the properties for the element (ID “menu”) accordingly.

    menuToFixed = hypeDocument.getElementById('menu');
	window.onscroll = function() {
		if (scrollY > 245) {
		    menuToFixed.style.position = "fixed";
		    menuToFixed.style.top = "0px";
		  	} else { // we are close to the top so switch styles
		  	menuToFixed.style.position = "absolute";
		  	menuToFixed.style.top = "245px";
		  	menuToFixed.style.left = "auto";
		  	menuToFixed.style.right = "auto";
		}
	}

(Melina Kiefer) #5

Thanks a lot, it is working now! :slight_smile: