Pinned horizontal scrolling section

[Peter Moore]

Hi,

 

I have a codepen doing part of the job I need (thanks to previous posters on this forum) but have one issue that I'm not sure is resolvable.

 

I'm looking to have a pinned horizontal scroller as seen in the codepen attached, however, once the horizontal section is pinned and scrolling the header section (grey background) scrolls out of view and the footer section (orange background) scrolls into view as you reach the end of the horizontal scrolling section.

 

What I'd like to do is have the header and footer sections in view whilst the horizontal scroll takes place. Hope this makes sense. 

 

Any ideas on if this is even possible are greatly appreciated!

See the Pen rNGeOpr by lejazz (@lejazz) on CodePen

[akapowl]

Hello Peter,

 

if you don't want any pin-spacing showing (which is the white space you see when the top section scrolls put and the footer comes scrolling in), you could wrap all your content inside a wrapping-div and pin that wrapper instead. Hope that'll help.

 

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

[Peter Moore]

@akapowl Thank you so much. That's so simple and does exactly what I need. Very much appreciated!