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 10 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 10 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!