Sticky navigation


(ocultor) #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)


Fixed menu bar & scroll over images
Scrollable text without the box?
Looking for help with a simple question
(Greg) #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)


Control timeline by scrolling
Fixed element at the top of page
(Hans-Gerd Claßen) #3

this hopefully should work
link

stickyNav.hype.zip (101.1 KB)


Lock a navbar at the top of screen? (like the Tumult Forums bar in this very forum)
(ocultor) #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.


(Hans-Gerd Claßen) #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","");
}

};

(Steve Flowers) #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.


(Hans-Gerd Claßen) #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 …


Fixed & Sticky Elements in Hype 3
(Steve Flowers) #8

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


(ocultor) #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


(Markus Bjerre) #10

Same here stflowers.


(Hans-Gerd Claßen) #11

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


(Shong) #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.


(Shong) #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!


(Greg) #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>

(Joel Hager) #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


(Shong) #17

Hi Joel,

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


(Joel Hager) #18

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


(Joel Hager) #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


(Shong) #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: