Sticky navigation

Using JavaScript with Hype
1

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)

1 Like
2

@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)

1 Like
3

this hopefully should work
link

stickyNav.hype.zip (101.1 KB)

7 Likes
4

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.

5

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

};
2 Likes
6

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.

7

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 …

8

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

9

Continuing the discussion from Sticky navigation:

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

2 Likes
10

Same here stflowers.

11

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

12

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

13

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

14

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!

15

@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>
16

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

17

Hi Joel,

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

18

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

19

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

20

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. :smiley: