Image are scrolling in fixed postition


Inspired from joaopaulots i want to redesign a website .
I have images with fixed postion but i am able to scroll the images when clicked and i can see the images below them

Here is my site Read-Only:

Can you share a read-only view of your site? The live version is hard to diagnose.

Click on the share button beside the launch button


Below is the read only view

Hi srija!

I opened the site and was able to get the effect that you wanted, but it will take some more work.
1 - Make a combo class of the upper section
2 - Set the upper section to position sticky, upper margin 0 and z index of 4

This will achieve the effect that you want, however, you won’t be able to see the lower section at all.

What you might have to do is make copies of the photos with position sticky that are hidden until the animation completes, then show the images until the x is clicked. I believe this would give the desired effect, except that the user could still scroll down on the main page while the article is open.

I think you would be better off disabling scrolling while the article is open. I haven’t done this before, but the folks at FinSweet have developed a tool called class adder that might get the job done. (I have no idea how easy/complicated this is to use, sorry!!)

Class Adder Intro

Disable Scroll Tutoiral

Let me know if this helps! :slight_smile:



Hidden refers to the Layout>Display>None
You’ve used this feature in a few of your animations, I believe.

My thought is that you can have a g=copy of the gallery images that will be hidden until the article opens, at which point, you will animate it to ‘Show’.

After the user exits the article, animate the image to hide again.

Does this make more sense?

This is a stellar site!! Where did you get your inspiration from?