css - 仅当顶部栏粘在顶部时如何显示元素? - Zurb 基金会

标签 css layout zurb-foundation

我有一个顶栏菜单,但当页面加载时它位于页面中间的某个位置。当我向上滚动时,我将其设置为 sticky,这样当我滚动页面时它就会固定在顶部。我的问题是,如何使顶部栏内的某些元素仅在它已经粘在顶部时才出现?当它没有粘到顶部时,我想隐藏一些元素。

最佳答案

<style>
  .only-sticky{
    display: none;
  }
  .fixed .only-sticky{
    display: inline-block;
  }
</style>
<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar data-options="sticky_on: large">
    <a href="#" class="small button">always visible</a>
    <a href="#" class="small button success only-sticky">visible only on sticky</a>
  </nav>
</div>

关于css - 仅当顶部栏粘在顶部时如何显示元素? - Zurb 基金会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23580953/

相关文章:

html - 如何像 Android 的 RelativeLayout 一样相对于另一个布置 HTML div?

python - 用另一个布局替换 QWidget 上的布局

php - 常用元素 php html navbar

javascript - 运行 jquery gallery 会使链接无法点击

javascript - 将文件夹中的所有文件重定向到另一个页面,但仍允许访问 html 文件

javascript - 如何在某个点(75%)开始动画?

jquery - 在 li 下方显示箭头指针,在事件 li 上使用不同颜色的指针

android - 在 ScrollView 屏幕底部定位按钮并设置比例宽度

html - 放大缩小时 Div 会移动

javascript - 如何创建嵌套在 html 内容中的基础弹出窗口(模板)