Menu icon Foundation
Sticky plugin issue

The thing is that when the page is scrolled down - everything is fine, but when then scroll back to top, the sticky element loses its height. Help please, what's the problem?

starting positionwhen scrolled down

scrolled back to top

stickysticky pluginfoundation sticky

The thing is that when the page is scrolled down - everything is fine, but when then scroll back to top, the sticky element loses its height. Help please, what's the problem?

starting positionwhen scrolled down

scrolled back to top

Adam over 3 years ago

Hi Vladamir and Philipp,

I ran into the same problem and I think its to do with the data-options, mainly setting anchor to page. I'm using top-bar not title-bar but I don't think that should matter.

Here's my working code:

 

<div class="top-bar-container" data-sticky-container>
  <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Philipp Jung over 3 years ago

Hey Vladimir,

looks like we ran into the same problem. I'm still not sure why this doesn't work, I only ecounter this buggy behavior with

data-options="marginTop:0" 

I searched the template-section, looking for a template with a sticky top-bar but I couldn't find one for foundation 6. I honestly have no idea why this behavior exists, I'll just avoid using a sticky top-bar for now I guess. Might be an official bug as well, I didn't check git.

Alec here ran into troubles with his top-bar as well, he solved it by setting up his development-environment differently.