Sticky nav latest version?

There are a few posts with stick nav and samples but I’m unsure which is the best one to use.
Im trying to achieve this with the transparent bg

Does anyone know which file I could use to base mine on?

I tried to implement it using the sample called Eat_concept-v2a but in Safari my sticky nav bar is not rock solid (it moves vertically a bit when I scroll) and sometimes it only appears on another page only if I start a scroll action, otherwise its not visible1_intro.zip (494.8 KB)

as long as sticky/fixed is not a feature Hype offers.
It'll be the most reliable solution to realize it outside of an Hypeembed ...

Thank you but I’m unsure what you mean

not building a sticky nav within a hypedoc ... but think for a nice Hypesolution around a navigation with another approach. Trying to built things within Hape that are not supported always ends up in some hacks that may work better or less.

....or built a htmlpage with a sticky nav and embed the hypedoc.

Ok thanks

navToTop.hype.zip (272.7 KB)

This could be a HypeApproach for an alternative NavToTop-Solution ...

Thanks Hans, very clever. Im guessing in that script there is no way to prevent the delay before the nav positions itself at the top?

Hi Michael!

Fixed this issue as described in your post. Please see: Live Demo

Hype Demo Project file: 1_intro_JHSv1.hype.zip (316.3 KB)

Also created the translucent background effect (backdrop filter) in the menu - BUT beware lack of support with older browsers... can I use?

If this Demo is what You are after then I will write-up a more detailed post.

2 Likes

Wow thats amazing Jim, thank you

1 Like

When you go to a new scene can the scene start at the top rather than where it was last left?

And that my friend is one of Hype's "it is not a bug it's a feature".

You can use this bit of JavaScript that is triggered by the "On Scene Load" handler for any Scene You wish to have appear starting at the top:

Scene Load got to Top JS

Hype Document Demo: Scene Switch go to top.hype.zip (25.7 KB)

The "scrollTo()" method parameters are the "xpos" (horizontal) & "ypos" (vertical) positions. So a setting of scrollTo(0,0) sets the document to the left-most & top-most scroll position in pixels. A setting of (20,0) would be a scroll of 20 pixels to the left of the document; the top stays at the top-most (0) scroll position.

View here for more info about "scrollTo".

1 Like

No, there is no way :slight_smile: the idea was to do sthg that Hype supports: animation :wink: In the last years i tend not to work against Hypes capabilities which offers most rubust output.
Hype does not support sticky or fixed atm ... (instead it takes account for all properties its controlled elements have. that's where any change from outside that is not updated within Hypes accounting may (not must!) break ...)

a nonresponsive setup, like yours ... i'd guess it'll be save though :slight_smile:

thanks @JimScott :slight_smile:

1 Like