Jump to content
Search Community

How to overlap section after section while keeping adjacent content? [ Как перекрывать раздел за разделом сохраняя соседний контент? ]

Poylar test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello. I looked at many examples, but they all give not what I need.
See my codepen.

The first problem is that if you add an indentation to the top of the sections, then the section that has already scrolled will pop out at the top. As I understand it, the scroll trigger does not solve this problem?
The second problem is that after I scroll through all the sections, the last one for some reason climbs onto content that is not related to these sections at all. Here, as I understand it, this is due to the fact that 'end' parameter is not correct.
Can you give an example where this implementation exists in the correct form?

What I'm trying to do: in the middle of all pages there are 3 blocks that should overlap each other when scrolling. I think you have seen this effect many times, but for some reason all my Google attempts came down to some plugins on elementor and webflow

See the Pen JjvxVQw?editors=1010 by poylar (@poylar) on CodePen

Link to comment
Share on other sites

  • akapowl changed the title to How to overlap section after section while keeping adjacent content? [ Как перекрывать раздел за разделом сохраняя соседний контент? ]

 

Hello Poylar

 

Every element that has the class panel in that example will get pinned (when the top of the element hits the top of the window in the original).

When you set the start to "top center" that means it will pin that element when the top of the element hits the center of the window. Now since the first section will have already passed that point it will appear exactly where it appears in your example, because that is what you tell it to.

 

I'm not sure I really understand what exactly it is you are asking, but if you mean to just incorporate the pinning panels somewhere down page after some native scrolling, here's an example for that.

 

See the Pen vYjbqme by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

 

Thanks for your reply. But my problem is that I need to add space above the collapsing sections, but when I add it with the 'start' parameter, it doesn't work. My example illustrates this problem.
In your example, you can specify start: "-100 top" and see the same problem.

 

Screenshot_32.png

Link to comment
Share on other sites

I was just about to add something about that to my previous post.

 

If you want the panels to have a different height and pin them somewhere amidst the window (like it looks you were attempting there), you will probably have to recalculate the end property to something like this, if you dont want any panel to unpin, before all panels have shown up.

 

Keep in mind, that this implementation will only work, if you have one 'block' of overlaying panels. If you want to have multiple 'blocks' of overlaying panels in different places amidst the scroll, you will have to further deduce the logic to achieve that.

 

Is that more like what you had in mind?

 

See the Pen gOzqNBd by akapowl (@akapowl) on CodePen

 

Link to comment
Share on other sites

27 minutes ago, akapowl said:

I was just about to add something about that to my previous post.

 

If you want the panels to have a different height and pin them somewhere amidst the window (like it looks you were attempting there), you will probably have to recalculate the end property to something like this, if you dont want any panel to unpin, before all panels have shown up.

 

Keep in mind, that this implementation will only work, if you have one 'block' of overlaying panels. If you want to have multiple 'blocks' of overlaying panels in different places amidst the scroll, you will have to further deduce the logic to achieve that.

 

Is that more like what you had in mind?

 

 

 

 

thank you!thats work great.Except that the block with the text "keep scrolling" for some reason is also superimposed. Do I need to add an empty div to avoid this?

Link to comment
Share on other sites

  • Solution

 

Not for some reason. As I said, every element with the panel class gets pinned in that example. So the last panel (the green one) gets pinned and thus the section below it will over-scroll it.

 

If you don't want that to happen, you could either make sure that this last, green element does s not have the same class as those that get pinned, or you could change the logic of your code to adjust to that case, like so:

 

pin: i === panels.length - 1 ? false : true

 

By a comparison of the element's index to the length of the panels array it will check wether to pin or not to pin the panel. If it is the last of all the panels, it won't pin, else it will pin the panel.

 

See the Pen XWqOvRa by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

3 minutes ago, akapowl said:

 

Not for some reason. As I said, every element with the panel class gets pinned in that example. So the last panel (the green one) gets pinned and thus the section below it will over-scroll it.

 

If you don't want that to happen, you could either make sure that this last, green element does s not have the same class as those that get pinned, or you could change the logic of your code to adjust to that case, like so:

 

pin: i === panels.length - 1 ? false : true

 

By a comparison of the element's index to the length of the panels array it will check wether to pin or not to pin the panel. If it is the last of all the panels, it won't pin, else it will pin the panel.

 

 

 

omg, thank you very much!

  • Like 1
Link to comment
Share on other sites

58 minutes ago, akapowl said:

 

Not for some reason. As I said, every element with the panel class gets pinned in that example. So the last panel (the green one) gets pinned and thus the section below it will over-scroll it.

 

If you don't want that to happen, you could either make sure that this last, green element does s not have the same class as those that get pinned, or you could change the logic of your code to adjust to that case, like so:

 

pin: i === panels.length - 1 ? false : true

 

By a comparison of the element's index to the length of the panels array it will check wether to pin or not to pin the panel. If it is the last of all the panels, it won't pin, else it will pin the panel.

 

 

 

im sorry, but in my case i still see back section on leave second section. when all section going to not fixed position. how is possible?

i have simple code, but i cant share you. this is work okay with padding hack?

this is gif: https://gyazo.com/b9734b28ac096ab32c02eda28ef7528d

I would like to solve this problem myself, but I don’t even understand why it works for you, but not for me.any suggestions or hints

Screenshot_33.png

Link to comment
Share on other sites

 

If you need some more help on this, please icnlude a demo of your scenario showing the issue you are having.

 

It is very hard to give you any solid advice beyond guessing, from just looking at a couple of screenshots.

 

 

 

Edit:

 

Sound like you might be dealing with collapsing margins, though, so maybe this can help.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, akapowl said:

 

If you need some more help on this, please icnlude a demo of your scenario showing the issue you are having.

 

It is very hard to give you any solid advice beyond guessing, from just looking at a couple of screenshots.

 

 

 

Edit:

 

Sound like you might be dealing with collapsing margins, though, so maybe this can help.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

 

if you add to .panel margin-top:80px; you can see this.

See the Pen XWqOvRa by akapowl (@akapowl) on CodePen

this is not about margin collapsing... or yes?

Link to comment
Share on other sites

10 minutes ago, Poylar said:

this is not about margin collapsing... or yes?

 

No, it's not.

 

Margins are outside of the elements in the box model, thus they do not count as something that adds to their height - here their offsetHeight in specific. So you'll need to add in the margin into your calculations for the end of the ScrollTriggers.

 

Here are some useful ressources on that topic.

 

https://medium.com/siliconwat/chapter-8-css-box-model-bae771db4da3

https://medium.com/siliconwat/chapter-9-box-model-dimensions-f9fa90defa

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

 

See the Pen bGMZGKz by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

5 minutes ago, akapowl said:

 

No, it's not.

 

Margins are outside of the elements in the box model, thus they do not count as something that adds to their height - here their offsetHeight in specific. So you'll need to add in the margin into your calculations for the end of the ScrollTriggers.

 

Here are some useful ressources on that topic.

 

https://medium.com/siliconwat/chapter-9-box-model-dimensions-f9fa90defa

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

 

 

 

 

oh sure, i forgot about offsetHeight get height without margins. 

Thank you , love you

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...