Make an element fixed at a position on conditions


(Alex) #1

Hello

I searched a lots on this forum for fixed an element when scroll, something like:

Fixed-Background-Picture.hype.zip 13 (1.0 MB)

fixedHeader.zip 57 (20.6 KB)

I can make parrall effect with fixed background without element animation in Wordpress, like this one:
https://www.lovcour.com/fixed-background-but-without-image-animation

Also I can make animation in Hype but can not make the element fixed at a position,

I mean I just want make the element both fixed and animated, here is my test Hype document:

scrollfixoncondition.hype.zip (20.8 KB)

In my case, when scroll down, I want the element fixed only on conditions that other element ON ENTER VIEWPOINT, and the element will be moved out after the other element moving over it.

Is it possible?

Thanks so much.


(Jonathan Deutsch) #2

So the flow for the Rectangle is scroll - don’t scroll for a bit (while the Text element intersects) - scroll again?

It is possible to do; you’ll need to write javascript for this. Fundamentally the position is going to need to change while looking as if it is not.


(Alex) #3

Exactly yes:)

This is just the quite difficulty for me, I checked lots of resource on this forums, but I did not find one similar sample, most of them are fixed header of fixed background, but from my understanding, I need a way to meet a relative fixed position but not absolute fixed position, right?

Alex


(Jonathan Deutsch) #4

Yeah, I don’t think I’ve seen a specific example of exactly what you’re asking. It even seems a little esoteric for general JS scrolling libraries, but might exist in some… I’m not too familiar with all of them out there.

Ultimately the code would need to calculate a new box position when the scrolling is complete. You could go the route of setting the position to fixed during the intersection period or adjusting the position whenever a scroll event is detected. The fixed method might yield better results as the browser can make sure it stays in place vs. always having to change it which could result in flicker.

The easiest way to do it would be to just have fixed values/scroll numbers to go off of. The more complicated route would be taking into account the box sizes and intersections.

I’d say if you are thinking of hiring someone, it is probably a 1-3 hour task to get it all working right.


#5

Although I wouldn’t trust @jonathan’s timing as Hype 4 was due 1st quarter of this year :stuck_out_tongue: :stuck_out_tongue:

Also, it’s highly doubtful that you’re ever gonna find an exact sample here that’s gonna fit exactly what you are asking. It’s gonna be more a case of taking some examples and piecing together what you need. As J states though, it’s quite an odd one even for existing libraries so … I don’t envy you. I’d definitely break it down in steps and see where you can get to. Even if you are looking for help here maybe break it down into manageable chunks and go from there.