Sticky navigation

it’s weird, I am using the latest chrome here.

just tested safari and firefox and they’re fine :frowning:

Is there a way to do this for multiple item? When i run the JS twice for two different items, it only works for the JS run last, and one item doesn’t stick.

Thanks!

1 Like

Is Sticky JS with 2 different elements possible?

Hypies,

I’m trying to get two different elements to stick on different parts of the page. I know there are multiple ways about going about this. o.O
Do I need to create a separate js function and reference it on the same html head? Any help is appreciated… Thx.

1 Like

To have sticky elements like this seems to be something many people need. For me this is very much needed for prototyping.

Are you (the hype team) looking into make this in a simpler way though the Hype UI like you can do in Macaw for example? If so, when can we expect to have this? I understand that you can’t say “tomorrow”, but in a week or in a year?

1 Like

Guys, I used the code below in several projects ( not in Hype) with success, it works!

however I discovered that the same code not work properly in Hype:

ISSUE 1: if you refresh the page the toolbar is hidden and you must scroll the page to show again the navigation. useless to try on CSS ( “! important” or any other way in my tests)

ISSUE 2: bad behavior if you scroll the page more than one time fastly

<style type="text/css"> 
#topnav {top: 300px;}
</style>

<script>
var nav = $('#topnav');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 300) {		
document.getElementById("topnav").style.position = "fixed";
document.getElementById("topnav").style.top = "0px";
		} else {
document.getElementById("topnav").style.position = "absolute";
document.getElementById("topnav").style.top = "300px";
		}
	});
</script>

I think the real problem is to override the styles used by the hype. the code works well mi my test ( not in Hype)

Still having this problem using Hype Pro 3.5.1, pinning the objects wont make them to stick.

if you need a simple fixed bar check out this template in HypeDocks
you can use CSS only

1 Like

Don’t know if this thread is dead but I was having trouble with h_classen’s solution from Sticky navigation because my sticky element kept moving out of the browser window. Here’s what I did:

in the style, I added:

transform: translateX(20px) translateY(0px) rotateY(0deg) !important;

on line 21 of the Javascript funtion, I changed it to

el.style.top = 'inherit';

hello , I’m trying to make a sticky navigation like this http://umd.edu ,
here is the simple project bar_JHSv1.hype.zip (12.5 KB)

if you remove the sticky function , the bar can be clicked many times , and another bar will slide out , however when I put the sticky function , the bar only can be clicked once . So , how do fix it?

Hope anybody can reply tooo

Hi Ricky!

The “sticky” setting did not alter the functionality for me - either with or without the class designation. I changed how the sliding bars reference the group they are in - this works for me with “sticky” class applied to the group.

bar_sticky_JHSv1.hype.zip (15.5 KB)

I decided to use the sticky property on the group, but when scrolling, the menu goes back to the place where it was at the beginning and does not fix at the top. Is it possible to fix the menu group itself at the top

2.zip (23.0 KB)