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.