Sticky navigation starting at special point

oh, this is great.

But what about if scrolly >800, and make the menu unfixed? how should rewrite this JS please?

Hi Alex!

You would simply include another conditional in the code for the “scrollY > 800”…

Scrolling - movable FixedMenu_JHSv5.hype.zip (23.9 KB)

Note that when the “Menu” is set to “absolute” positioning for “scrollY > 800” we also set the “top” property to “800px” so it scrolls out of view smoothly it doesn’t suddenly disappear.

menuToFixed = hypeDocument.getElementById('menu');
	
	window.onscroll = function() {	
		if (scrollY < 245) {
	    menuToFixed.style.position = "absolute";
	    menuToFixed.style.top = "245px";
	    menuToFixed.style.left = "auto";
	  	menuToFixed.style.right = "auto";
	  	} else if (scrollY > 245 && scrollY < 800) {
	    menuToFixed.style.position = "fixed";
	    menuToFixed.style.top = "0px";
	    menuToFixed.style.left = "auto";
	    menuToFixed.style.right = "auto";
	  	} else if (scrollY > 800){
	  	menuToFixed.style.position = "absolute";
	  	menuToFixed.style.top = "800px";
	  	menuToFixed.style.left = "auto";
	  	menuToFixed.style.right = "auto";
		} 
	}

Great thanks.

It works great well.

What about if make images WITH ANIMATION work as this way when scroll the page.

and here is the animation Javascript:

window.onscroll = function () {
	
	var scrollAmount = scrollY;
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'timeline1')
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'timeline2')

}

and aslo, I used your javascript as:

menuToFixed = hypeDocument.getElementById('image');

window.onscroll = function() {	
	if (scrollY < 3736) {
    menuToFixed.style.position = "absolute";
    menuToFixed.style.top = "3736px";
    menuToFixed.style.left = "auto";
  	menuToFixed.style.right = "auto";
  	} else if (scrollY > 3736 && scrollY < 3882) {
    menuToFixed.style.position = "fixed";
    menuToFixed.style.top = "0px";
    menuToFixed.style.left = "auto";
  	menuToFixed.style.right = "auto";
  	} else if (scrollY > 3882){
  	menuToFixed.style.position = "absolute";
  	menuToFixed.style.top = "3882px";
  	menuToFixed.style.left = "auto";
  	menuToFixed.style.right = "auto";
	} 
}

unfortunately, they does not work at the same time, is it possible to make these two javascript work at the same time?

here is the Hype document:scrollfixoncondition.hype 2.zip (22.2 KB)

it would be great appreciated if you could let me know what I should do, thanks again.

I don’t have time in the immediate future to work with this - but it seems that an element with a “position = fixed” property, that is also scaling, might work at cross-purposes… don’t know as I haven’t tried something like this before.

Another approach would be - for the element that is scaling - to have its “top” property continually increasing in value (i.e. it is moving down the page); so while the element is being moved down - the overall appearance, because it is also being scaled up - has the effect of making the element look static, or “fixed” in position.

Of course, You have to precisely balance the increase of the scaling of the element to the increase of the “top” property value otherwise the element will jitter. Clearly some trial and error will be needed to find the right mix.

Yes, it is just what I mean here. it is easy to make a element work on several timelines at same time, but it is seems difficult for me by JS.

I tried that, and it looks not so smoothly.

Alex

Hi Alex!

Sorry for the delay but this has been my first opportunity to reply…

Hype Demo Project: Scrolling - movable FixedMenu_JHSv7.hype.zip (23.8 KB)

This project uses JavaScript only - no timelines. I have checked this demo on Safari, Chrome, Firefox & Opera (all Mac) - all work.

When viewing this project please resize your browser window so just the first three bars are showing. This will allow the last change in positioning (back to “absolute”) to clearly display without an overly long page height needed. In your actual project You can make it any length You wish of course. (Please see Fig.1 below).

Fig.1
BrowserWindowSize


Overview
As the viewer scrolls the page down the “target element” (absolute positioning) scrolls into view. At a point a few hundred pixels below the top of the browser window the target element assumes a “fixed” position and scales up in size.

With further scrolling (several hundred pixels) the target element is re-assigned the “absolute” positioning and scrolls out of view.


Details

Here is the code for the function (triggered by “On Scene Load”):

var elToFixed = hypeDocument.getElementById('targetEl');
var elReadOut = hypeDocument.getElementById('elementReadout');
	
	window.onscroll = function() {	
	elReadOut.innerHTML = scrollY;
	if (scrollY < 800) {
	    elToFixed.style.position = "absolute";
	    elToFixed.style.top = "1100px";
	  	} else if (scrollY > 800 && scrollY < 1300) {
	  	elToFixed.style.position = "fixed";
	  	elToFixed.style.top = "300px";
	  	elToFixed.style.left = "auto";
	  	elToFixed.style.right = "auto";
	  		if (scrollY < 950){
			hypeDocument.setElementProperty(elToFixed, 'scaleX', (scrollY - 699)*.01);
			hypeDocument.setElementProperty(elToFixed, 'scaleY', (scrollY - 699)*.01);
			}
		} else if (scrollY > 1300) {
		elToFixed.style.position = "absolute";
	    elToFixed.style.top = "1600px";
		}
	}

You will note there are very specific numbers used in this code. To make it easier to figure out what these numbers should be - particularly “scrollY” I have inserted:

var elReadOut = hypeDocument.getElementById('elementReadout');

elReadOut.innerHTML = scrollY;

This code places the “scrollY” readout in the target element (id “elementReadout”) - as you scroll this number is constantly updated. (Please see Fig.2 below.)

Fig.2 - “scrollY” readout
innerHTML_Readout


The Scaling of the Target Element

The scaling is controlled by the scrolling - not a timeline. As mentioned before we are not using timelines in this demo.

if (scrollY < 950){
    hypeDocument.setElementProperty(elToFixed, 'scaleX', (scrollY - 699)*.01);
    hypeDocument.setElementProperty(elToFixed, 'scaleY', (scrollY - 699)*.01);
}

The number “699” is based on the scrollY trigger of “800” (which sets the target elements position to “fixed”). I wanted to come up with the number “100” - which when multiplied by “.01” yields a one percent scaling for every pixel scrolled. You will notice that “800-699” = “101” not “100”… BUT the on-screen scaling worked smoother using “101” instead of “100”.

All these numbers will be variable depending on when the “conditional” code is needed to be triggered for your particular project - so You will no doubt need to make adjustments.

1 Like

Hi @JimScott,

Thanks for your great work, it looks really charming:)

I understand that there are several parts:

absolute
    <800
fixed
    >800,<1300,
scale
    >800<950,
scale complete
    >950 
change back to absolute.
   >1300

Yes, so I am just thinking that it would be even more great if you could also make support scroll timelines, so that it support much more elements and animations at a fixed position, not only one element scaling. is it possible please?

Thanks again, and have a nice day.

Alex

I followed up with your original request (quoted just above) to use JavaScript to manipulate an element in this regard. Your original example showed just one element scaling and changing position properties:
scrollfixoncondition.hype 2.zip (22.2 KB) - so that’s what I created for You.

Yes, so I am just thinking that it would be even more great if you could also make support scroll timelines, so that it support much more elements and animations at a fixed position, not only one element scaling. is it possible please?

You have all the information You need to accomplish your newest request right here in this thread. I am done.

1 Like

Hi @JimScott,

I see, really thanks, great work:)
As to timelines scroll, I am not technical background, and that is just what I was thinking.

Have a nice day.

1 Like

Oh Alex - come on - You give up too easy!

The following is not technical. You already had all the examples You needed - just cut & paste.

In the “onScroll” section I added the following two lines to my previous demo project (_JHSv7):

window.onscroll = function() {	
	var scrollAmount = scrollY;
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'Animate1');

You’ve seen this code before in this thread.


In the attached Hype Demo (_JHSv8) I also added a timeline called “Animate1” to match the new code.

This timeline rotates the target element & then changes its color.

Simple!

Now I’m done - this time I mean it! :sunglasses:

Scrolling - movable FixedMenu_JHSv8.hype.zip (24.2 KB)

3 Likes

:grin::grin:

ok, I will challenge more next time :grin:

Really great work, thanks.

sometimes, I do not know how to achieve an animation, and sometimes, I do not know how to say that exactly in English even I know, sorry for my poor english.

After view your great demo, at the beginning, I realize that I should say: Scrolling timelines at a fixed position, right? :slight_smile:
Thanks again, and have a nice day.

Alex

1 Like

Hello @JimScott

What about if I need trigger multiple Element ids, I tired these ways, but not work for me:

First way:

var elToFixed = hypeDocument.getElementById('targetEl1' 'targetEl2' targetEl2');

Seond way:

var elToFixed = hypeDocument.getElementById('targetEl1');
var elToFixed = hypeDocument.getElementById('targetEl2');
var elToFixed = hypeDocument.getElementById('targetEl3');

Thanks

1 Like

Hi Alex!

I don’t have a lot of time right now to create a working example with my code above but I would think an array would be a good approach for this situation.

You can read about arrays here. Look down this page for the sub-head “Looping Array Elements”.

I will not be available in the immediate future for any follow-up questions - so hopefully this will do the trick for You - or someone else may help or have a suggestion.

Hi Jim,

Thanks anyway, that is definitely a great way.

By the way, I found the way of triggering by Unique Element ID might be quite limited, and the way by class name seems quite flexible.

and I am just thinking the possibility of the way of changing “fixed” to absolute" and absolute to fixed by hypeDocument.setElementProperties, and I found an interesting case here:



and I will study more, and thanks again.

Indeed - Class allows for greater freedom in a multiple use scenario…

Glad your studies are bearing fruit! :+1::cherries::strawberry:

hypeDocument.setElementProperties is only a wrapper to the Hype API function hypeDocument.setElementProperty meaning it only supports the attributes listed in the help of that native function.

You can always change the display with element.style.display = "fixed" with element being a reference to the element you want to change.

Thanks. It would be really great if it can be changed by a Javascript with class name, by this way, the element or a group of elements can be set as the following dynamically:

Do you think it is possible please?

Thanks

Classes can set the display property but they can’t „see“ the scroll offset. So until now no real way todo it with only CSS.

css sticky toggles ‘scroll’ and ‘fix’ …
… but won’t wait for an animation to be finished

disable scroll on the body may be an option …

1 Like

Thanks @MaxZieb and @h_classen,

I realize it is not easy :grinning:
Have you checked this before please?

URL:

I just suppose this Javascript is by IntersectionObserver, is it possible to do by IntersectionObserver if CSS is not the right way please?

Also, I found this resource, and it really look like what I expect:

Really expect your professional comments, thanks in advance.