Trigger two element on scrolling with JS

Using JavaScript with Hype
1

Hi to everyone :slight_smile:
I'm a beginner so sorry for my gaps.

I'm trying to figure out how trigger two different elements (in these example, just to simplify, are equals in size and movement) on scrolling.
When I try to load these two specifics function just one works. Is there any conflict?

FIRST FUNCTION

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

test.zip (22.7 KB)

SECOND FUNCTION

menu = hypeDocument.getElementById('circle2');
	
	window.onscroll = function() {	
		if (scrollY < 23) {
	    menu.style.position = "absolute";
	  	menu.style.top = "23px";
	    menu.style.left = "fixed";
	  	menu.style.right = "fixed";
	  	} else if (scrollY > 23 && scrollY < 250) {
	    menu.style.position = "fixed";
	    menu.style.top = "0px";
	    menu.style.left = "fixed";
	  	menu.style.right = "fixed";
	  	} else if (scrollY > 250){
	  	menu.style.position = "absolute";
	  	menu.style.top = "250";
	  	menu.style.left = "fixed";
	  	menu.style.right = "fixed";
		} 
	}
  • Can I merge these two JavaScript in one to trigger two elements using hypeDocument.getElementById instead using classes?

Thanks in advance.

2

you are overwriting the listener-function

you can do

window.onscroll = function() {
  functionOne();
  functionBlabla();
}

or use addEventListener:

window.addEventListener('scroll', thisFunction);
window.addEventListener('scroll', thatFunction);
3 Likes
3

As @h_classen has already answered your initial question, this is more of a suggestion and an example of achieving something similar using Hype Action Events. Not sure what the exact effect is you're going for, though. This example assumes it to be a sticky effect. In this case, there is no CSS involved, but rather just the Hype API to tweak the absolute position.

Example_Data_Attribute_Document_Scroll_with_Min_and_Max.hype.zip (24,3 KB)

1 Like
4

Thank you for your advices :pray:

5

Thanks for the example. This is exactly what I thought in my mind. :heart_eyes:

6

Hi Max.
Your solution perfectly works.
But why if I want also to trigger a timeline when an element appear with this function:

$('#example').waypoint (function(){
		hypeDocument.startTimelineNamed('example');
	}, { offset: 'bottom-in-view' });`

doesn't work?

this is my index:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeActionEvents/HypeActionEvents.min.js"></script>

test.zip (23.0 KB)

7

You don't need jQuery and waypoints… :thinking:
Just use intersection observer, see test-intersection-observer.hype.zip (28,4 KB) :partying_face:
or do it in Hype test-done-in-hype.hype.zip (28,0 KB)

2 Likes
8

I'm feeling dumb :rofl:
Thanks :pray:

1 Like