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>

Haven不包含任何CSS，因为它回到了Foundation文件中的标准CSS。

希望能够继续并提前感谢。

Answer 1

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

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

Answer 2

也可以通过使用background-property：

创建子元素来解决

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

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

HTML：

2 个答案: