Change title bar when scrolling list

1

Hello .
I used this code to show navbar after scrolling page but I cant show navbar when scroll a menu list.
var navbar = hypeDocument.getElementById(‘navbar’);
navbar.style.position = “fixed”; // fixed position for Navbar group

window.addEventListener('scroll', function (e) {

	hypeDocument.goToTimeInTimelineNamed(scrollY * 0.01, 'animation')
	
});

testscroll.hype.zip (20.4 KB)
I want to show navbar when scrolling menu list, not scrolling page.
Can you show me the way to show navbar when scrolling button “show navbar” on top of the list?
Thank you so much.

2

You are setting the listener on the window object rather than the element which is scrolling.
Give the group that scrolls an id = navbarGroup.

and you also probably should use ‘scrollTop’ instead of scrollY

var navbar = hypeDocument.getElementById('navbar');
		var navbarGroup = hypeDocument.getElementById('navbarGroup');
	navbar.style.position = "fixed"; // fixed position for Navbar group
	
	
	
	
	navbarGroup.addEventListener('scroll', function (e) {
	 
		hypeDocument.goToTimeInTimelineNamed(navbarGroup.scrollTop * 0.01, 'animation')
		 
		
	});
3

Thanks , it works.
Can you explain what it is scrollTop * 0.01?
How can I set extractly to show navbar when my button "show navbar " scroll on top of the list?

4

scrollTop explained.

scrollTop * 0.01 value is multiplied by this number.

This is one way of controlling a timeline in by small increments.

I did wonder if you where trying to emulate a section scroll. Nice idea.

The trick here is that you get the top of the “show navbar” relative to it’s parent which is the navbarGroup.

You then deduct from that top value which is 188 px( from the top of the parent) the scrollTop value.

So if we have 188 and the scrollTop starts at 0. We scroll down the scroll value increases.
The result after the deduction from the 188 gets smaller.

In the example below I have played with the numbers to get a proximity of when I think the bar should start to show. 50px from the parent top. And how fast it should show. navbarGroup.scrollTop * 0.006.

Give the Show navbar an id =shownavbar

		var navbar = hypeDocument.getElementById('navbar');
		var navbarGroup = hypeDocument.getElementById('navbarGroup');
	navbar.style.position = "fixed"; // fixed position for Navbar group
	
	
	
	
	navbarGroup.addEventListener('scroll', function (e) {
	 var shownavbar = hypeDocument.getElementById('Shownavbar');
	 
	if (  hypeDocument.getElementProperty(shownavbar, 'top')  - navbarGroup.scrollTop  < 50 ){ 
		 
	 		hypeDocument.goToTimeInTimelineNamed(navbarGroup.scrollTop * 0.006, 'animation')
	 		
	 		} 
		 
		
	});
1 Like
5

Thanks for help,
But that animation not reverse when scroll down the list.
And how to show navbar2 when button "Show narbar 2" scroll on top of the list?
Thank you so much.testscroll.hype.zip (18.4 KB)

6

You need to add the logical additional code.
You have used the right word in what you are looking for. Reverse.

Add code that does this.

Research ‘javascript if else’ and there should be enough in the example to work it out!