【问题标题】:Foundation 6 sticky menu. Left menu div pushes up when page is scrolled back to topFoundation 6 粘性菜单。当页面滚动回顶部时,左侧菜单 div 向上推
【发布时间】:2016-03-09 16:45:01
【问题描述】:

所以我有一个粘性导航栏,当页面向下滚动和向后滚动时,右侧导航保持不变,但其余部分向上推离屏幕。我已经尝试了各种方法,但无法弄清楚,我假设我已经看过一些东西,所以希望大家能提供帮助。

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,因为它在 Foundation 文件中恢复为标准 CSS。

希望这足以继续,并提前致谢。

【问题讨论】:

    标签: html css zurb-foundation-6


    【解决方案1】:

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

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

    【讨论】:

    • 谢谢,我回家试试看,如果能帮我解决问题,请告诉您。
    • 辛苦了,谢谢!
    【解决方案2】:

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

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

    【讨论】:

      猜你喜欢
      • 2021-03-31
      • 1970-01-01
      • 2021-09-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多