Sticky navigation

ocultor · May 9, 2015, 11:26am

Hi, I would like to achieve a navigation like this one with Hype, http://spin.co.uk/ anyone can please point me in the right direction, tried waypoints but had no luck with it, all I want to achieve is the menu bar stick at the top of the page when scrolling down and move down a bit to show the header when scrolling back up…

I found other file here that looks promising please see the attached file, fisrst half of it is going but then it just loops back.

thanks in advance.

sticky-nav.hype.zip (206.1 KB)

gasspence · May 9, 2015, 11:26am

@ocultor - here’s a very basic sample that might give you a starting point…

window.onscroll = function (screenScrolled) {  
hypeDocument.startTimelineNamed('scroll', hypeDocument.kDirectionForward) 
}

stickyNav.hype.zip (13.1 KB)

h_classen · May 9, 2015, 11:26am

this hopefully should work
link

stickyNav.hype.zip (101.1 KB)

ocultor · April 11, 2015, 9:19pm

Thank you very much guys, h_classen will def use your solution as it already does everything I need, your help is much appreciated fellow hypers.

h_classen · April 12, 2015, 6:42am

hi,

you might change the js to:

   c = true;

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

};

stflowers · April 12, 2015, 12:46pm

Hi h_classen -

I see how this is working well in your published output. But when I attempt to preview or publish, on my side the menu element disappears. It’s sticking to 0px within the container. It’s still there it’s just up under the scroll.

I’ve been scratching my head trying to figure out why my published output behaves differently than yours. I see what yours is doing and it looks like it should work in mine but it’s not:)

This is the same issue I ran into last week. I ended up creating a separate DIV for my menu. Works great but I’d love to figure out why yours isn’t working for me.

h_classen · April 12, 2015, 3:09pm

you’re up to date: 3.03 (466)¿
btw. there’s still a bug if layout is not responsive …
btw for use with mobiles you’ll have to add a touchmove-event as scroll will only fire when started and ended …

stflowers · April 12, 2015, 5:39pm

Nope. Went through the App Store and 3.03 isn’t available yet:( Will check it again after the update is available.

ocultor · April 13, 2015, 2:13pm

Continuing the discussion from Sticky navigation:

h_classen:

hi,

you might change the js to:

   c = true;

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 &gt;= sPos && c){
c = false;
el.style.top = '0px';
el.setAttribute("class","sticky");
}
if (lastPos.y2 &lt; lastPos.y1 && wY &lt;= sPos && !c){
c = true;
el.style.top = sPos + 'px';
el.setAttribute("class","");
}

};

I can’t notice a difference but I changed it, see it in action here:

https://dl.dropboxusercontent.com/u/1585073/munda-test/index.html

on 320 wide had to remove it as the menu gets too long if you click “trabajos” and being fixed you’re not able to scroll it but I am comfortable with the results, thanks again

markus · April 13, 2015, 2:21pm

Same here stflowers.

h_classen · April 13, 2015, 2:38pm

perhaps latest version of hype is only for Pro?
Until this version position fixed didn’t work within dti …

oraocean · April 13, 2015, 2:57pm

I have pro, and have the same issue too. Looking forward to update it!

Daniel · April 13, 2015, 3:43pm

Waiting on Apple for approval, but it shouldn’t affect this.

oraocean · May 9, 2015, 11:27am

Dear Daniel,

Not sure the reason why, with the same Hype file, but the HTML code I generated and the one form http://forums.tumult.com/users/h_classen
is different, it seems the .sticky class is given but not applied in my version.

stickyNav by shong.zip (92.8 KB)

stickyNav by h_classen.zip (28.3 KB)

hope this helps, Thanks!

gasspence · April 14, 2015, 12:54am

@oraocean - There is a space between “position” and the colon in the HTML Header in your file

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

corrected…

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

jrhager84 · April 18, 2015, 2:21am

Ok, so I’m confused. Which parts would I add as a custom function to get the navbar to work? Do I take what was initially posted, and add the later part after, or just use the second part? Apologies. I’m new to this stuff… hahahaha

oraocean · April 18, 2015, 2:34am

Hi Joel,

Sorry for making you confusing, this post works perfect after updating to Hype 3.03

jrhager84 · April 18, 2015, 4:21am

There doesn’t appear to be an actual link for what you’re linking to. Please advise. Thanks!

jrhager84 · April 18, 2015, 4:48am

Also - Where are you guys adding this, and how are you calling it? It’s a JS function, right? If I made a persistent symbol, I can call the script on load, correct? I think I’m missing a piece of information that’s crucial, and I’m not smart enough to know what/how to ask… hahahaha

oraocean · May 9, 2015, 11:26am

stickyNav.hype.zip (101.1 KB)
This is the file upload by h_classen, open it and you will see the JavaScript function is triggered in scene on load. there is a ID “menu” in the function which matches the menu bar on canvas, and a Class"sticky" matches the HEADER on canvas and the script in HTML header. Hype makes it very easy to link functions and elements and work together.