Menu icon Foundation
How to have two sticky element in one page?

Hello!

i've to admint: i'm a n00b with foundation, but i want to learn ;)
so if the question is "wrong/stupid/easy" i apologize.

The "problem" (two sticky element on a page):
i've 5 divs in a page.

header (first element to stick in the page)

content

div with one big img

div with 3 small imgs

navigation (secondo element to stick under the header)

the rest of the page.

 

I want to scroll my page with header sticky at top, after navigation "collide" with header it will stick under this...

 

<main class="grid-container">
 		<header class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">My Personal Page</header>
 		<section>
 			<div id="bigone">IMG BIG</div>
 			<div id="smallthree">THREE IMGS SMALLZ</div>
 		</section>
 		<nav>menu</nav>
        <div id="content">the rest goes here</div>

 	</main>

 

hope u can help me, i searched the docs but with no luck... or skill...
so many thanks!

stickyheadernav

Hello!

i've to admint: i'm a n00b with foundation, but i want to learn ;)
so if the question is "wrong/stupid/easy" i apologize.

The "problem" (two sticky element on a page):
i've 5 divs in a page.

header (first element to stick in the page)

content

div with one big img

div with 3 small imgs

navigation (secondo element to stick under the header)

the rest of the page.

 

I want to scroll my page with header sticky at top, after navigation "collide" with header it will stick under this...

 

<main class="grid-container">
 		<header class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">My Personal Page</header>
 		<section>
 			<div id="bigone">IMG BIG</div>
 			<div id="smallthree">THREE IMGS SMALLZ</div>
 		</section>
 		<nav>menu</nav>
        <div id="content">the rest goes here</div>

 	</main>

 

hope u can help me, i searched the docs but with no luck... or skill...
so many thanks!

Rafi Benkual 8 months ago

Any way you can post an example in this codepen so we can help more? 
https://codepen.io/rafibomb/pen/bxZJMP

Giuseppe GIardina 8 months ago

Good morning Rafi and thanks!

Last night i managed to make a working version using only css, that's what i wanted to do! Are there any "better" or more elegant ways to do it?

https://codepen.io/xP30/pen/YOMKKR

thanks!