Two Sticky LayoutGrids Acting As One Header?
Posted: Thu Aug 18, 2022 5:19 pm
Is there a way to achieve this?
SETUP: on a master page have...
Layoutgrid #1 contains a nice blue background with text in white of company name, about 40px in height.
Layoutgrid #2 contains a white background with great looking logos and some text, about 160px in height.
Layoutgrid #3 contains a cool looking black background with a nav bar of white text, about 23px in height.
DESIRED EFFECT: as the index page (which is pointed to the Master Page) scrolls down...
Layoutgrid #1 stops at top of page (sticky layer).
Layoutgrid #2 keeps scrolling out of sight.
Layoutgrid #3 stops at bottom of Layoutgrid #1 so that the nav bar sits just under the title of the website and both are always visible.
EXAMPLE:
(edit: had the images reversed)
Before scrolling:
https://tinypic.host/i/uY2uj
While scrolling:
https://tinypic.host/i/uYz9J
Any/all help is much appreciated!
SETUP: on a master page have...
Layoutgrid #1 contains a nice blue background with text in white of company name, about 40px in height.
Layoutgrid #2 contains a white background with great looking logos and some text, about 160px in height.
Layoutgrid #3 contains a cool looking black background with a nav bar of white text, about 23px in height.
DESIRED EFFECT: as the index page (which is pointed to the Master Page) scrolls down...
Layoutgrid #1 stops at top of page (sticky layer).
Layoutgrid #2 keeps scrolling out of sight.
Layoutgrid #3 stops at bottom of Layoutgrid #1 so that the nav bar sits just under the title of the website and both are always visible.
EXAMPLE:
(edit: had the images reversed)
Before scrolling:
https://tinypic.host/i/uY2uj
While scrolling:
https://tinypic.host/i/uYz9J
Any/all help is much appreciated!