While scrolling in view with single column grid: Sticky elements, and positioning help

Design help General
#1

Hey there!

On tablets and smaller screens
We got 1-column. There’s a gap between the nav bar and the grid. How do we keep the small tag and the grid fixed as they are before the scrolling starts?

Section 1 title got a top margin of 100px after the tag for some space. When we scroll towards the bottom, Section 2 title appears. But its placement is off in comparison to where Section 1 title was. Is it possible to make Section 2 title 100px from the tag (assuming we can keep the tag fixed as it is)?

Here is my site Read-Only: LINK

#2

Looks like you’ve fixed this one too, or am I missing something?

#3

Hi Jonathan,
Thanks for answering to our recent posts!! Sorry we weren’t clear with this post. So we took a video:

https://drive.google.com/file/d/1dq3QTnGRMWvLF51g3Z0fYlOMTQDJMrHT/view?usp=sharing

We are referring tablet and smaller screens. We tried to place emphasis on the things we are stuck with:

  1. The white gap between the grid and the nav bar - we want to keep this white space.
  2. Small tag moves when we scroll. Again, we would would like this to be in a fixed placement. Somehow we got it working on desktop, but not for smaller screen sizes.
  3. Notice where “Very Long Section 1 Title” is. As we scroll through the page, “Section 2 title” comes up. Once you get to the bottom of the page, Section 2 title sit higher than where Section 1 title was (at 0.57). Would it be possible for Section 2 end at the same placement as Section 1 title? (at 0.45)

Thanks :grinning:

#4
  1. Section Title Wrapper = sticky top:5% (you might want to change the amount)
1 Like
#5
  1. On Tablet: Section 2 title Margin:top:100 (looks strange in the designer, but good in the page) - must the same margin as the section 1 title
1 Like
#6
  1. You need to create the space. Webspace doesn’t exist unless you make it. Once it’s created you need to fix it in position. I’ll let you play with that idea.
1 Like