Menu icon Foundation
Sticky: Dynamically Calc marginTop or actually stick to another element

Hi

 

It is highly possible I'm not understanding how the sticky options work, but how do you get one div to stick to the bottom of another when they come in contact, regardless of the top divs height? From what I understand, you have to define the marginTop to place the div when it becomes sticky. I have two sticky navs but they may overlap if the top navs height changes when the page is resized.

Is it possible for js to calculate the top navs height dynamically to set the marginTop for the second sticky or is there an option to tell one div to stick to another?

If my explanation is confusing, check out my example: https://codepen.io/arnulfo/pen/JMgjMp

It works fine when the page is fairly large but starts to break when the window is resized and before it reaches the medium breakpoint. The 4 Global Menu Items begin to stack causing the height to change, which throws off the marginTop set for the site menu. They then overlap. 

Your suggestions and support are greatly appreciated.

Thank you!

sticky

Hi

 

It is highly possible I'm not understanding how the sticky options work, but how do you get one div to stick to the bottom of another when they come in contact, regardless of the top divs height? From what I understand, you have to define the marginTop to place the div when it becomes sticky. I have two sticky navs but they may overlap if the top navs height changes when the page is resized.

Is it possible for js to calculate the top navs height dynamically to set the marginTop for the second sticky or is there an option to tell one div to stick to another?

If my explanation is confusing, check out my example: https://codepen.io/arnulfo/pen/JMgjMp

It works fine when the page is fairly large but starts to break when the window is resized and before it reaches the medium breakpoint. The 4 Global Menu Items begin to stack causing the height to change, which throws off the marginTop set for the site menu. They then overlap. 

Your suggestions and support are greatly appreciated.

Thank you!

Alejandro Castillon almost 2 years ago

For others, I solved it with 2 media queries. First, remove the data-option="marginTop" from the html. Next, create the media query for the points between medium and where the top menu items stacked. Second media query was for the previously mentioned breakpoint and above (top menu items were no longer stacked).

The css used was #yourDiv.is-stuck.is-at-top {margin-top: XXem !important;}