Foundation 6 粘性菜单。当页面滚动回到顶部时，左侧菜单 div 向上推

Question

所以我有一个粘性导航栏，当页面向下滚动并返回时，右侧导航栏保持不变，但其余导航栏被向上推离屏幕。我已经尝试了各种方法，但就是想不通，我假设我已经看过一些东西，所以希望大家能帮忙。

HTML:

<div data-sticky-container>
  <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%">
    <div class="title-bar-left">
      <ul class="menu">
        <li class="menu-text">TITLE</li>
      </ul>
    </div>
    <div class="title-bar-right">
      <ul class="menu">
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>
    </div>
  </div>
</div>

没有包含任何 CSS，因为它回到了基金会文件中的标准 CSS。

希望这足以继续下去，在此先感谢。

Answer 1

我遇到了同样的问题，这个样式修复对我有用：

.sticky.is-anchored { 
    bottom: auto !important;
}

Answer 2

也可以通过创建一个带有背景的子元素来解决-属性:

<div class="sticky">
    <div style="background-color: blue">...</div>
</div>

Foundation 6 粘性菜单。当页面滚动回到顶部时，左侧菜单 div 向上推

Foundation 6 sticky menu. Left menu div pushes up when page is scrolled back to top

html

css

zurb-foundation-6

HTML: