Question

我想要实现的是当页面向下滚动时导航被隐藏 - 就像它传统上一样从屏幕顶部消失。当用户向上滚动页面时，导航将再次滑入视图。同样，如果再次向下滚动，它就会被隐藏。

我为此尝试了几个不同的插件，它们几乎可以工作。我目前正在关注的是＆＃34; jquery-unveiled-navigation＆＃34;

链接：https://github.com/weaintplastic/jquery-unveiled-navigation 示例：http://codepen.io/weaintplastic/full/RNpXOO/

这几乎完全符合我的要求。一旦脚本处于活动状态，它就可以用于某些类。因为我只想在脚本活动时添加背景颜色＆＃39;。因此，在导航离开屏幕并且不在顶部之前，它将是透明的。

此外，我知道使用此导航功能，如果您向上滚动以便导航处于视图的一半，它将快速调整，以便您可以完整地查看其中的栏。但是我非常喜欢它的想法，它只显示你滚动的数量。因此，如果导航是100px高，并且滚动30px，则只能看到条形图的底部30px。向下滚动会再次隐藏条形图像，这是有意义的吗？

所以步骤将是（如果这更清楚）：

页面顶部的标题，透明背景。
向下滚动时，导航会逐个像素地离开屏幕。
当用户向上滚动时，标题会再次显示它的自我 - 这次是背景颜色。
一旦标题再次点击浏览器顶部，背景将被删除。

我的标记非常简单。该栏仅保留徽标和导航切换，因为导航被隐藏，直到点击切换，这将显示导航全屏。

<header class="page-head">

    <a href="#" class="page-head__home-link"></a>

    <a href="#" class="page-head__toggle"><span>Menu</span></a>

    <nav class="site-nav">
        <ul class="site-nav__list">
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
        </ul>
    </nav>

</header>

我删除了page-head__home-link内的SVG，否则它会成为代码墙！

希望有人可以提供帮助：）

Answer 1

如果没有jquery或库，你可以很容易地做到这一点。您只需要观看滚动事件，当方向发生变化时，将标题放在视野正上方，然后在继续滚动时确保它永远不会从父容器的顶部移开。

var body, direction, margin, pageHead, pageHeadHeight, scrolled;

body = document.getElementById('tall');
scrolled = 0;
direction = null;
pageHead = document.getElementsByClassName('page-head')[0];
pageHeadHeight = pageHead.offsetHeight - 1;
margin = 0;

body.addEventListener("scroll", function(event) {
  if (scrolled < body.scrollTop) {
    direction = 'down';
  } else {
    if (direction === 'down') {
      direction = 'up';
      margin = Math.max(0, body.scrollTop - pageHeadHeight);
    }
    if (margin > body.scrollTop) {
      margin = body.scrollTop;
    }
    pageHead.style['margin-top'] = margin + 'px';
  }
  return scrolled = body.scrollTop;
});

.tall {
  background-color: blue;
  min-height: 3000px;
  min-width: 100%;
}
#tall {
  max-height: 180px;
  border: 3px solid pink;
  overflow: auto;
}
.page-head{
  color: white;
  display: inline-block;
}
a {
  color: white;
}

<div id="tall">
  <div class='tall'>
    <header class="page-head">

        <a href="#" class="page-head__home-link"></a>

        <a href="#" class="page-head__toggle"><span>Menu</span></a>

        <nav class="site-nav">
            <ul class="site-nav__list">
                <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
                <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
                <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
                <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
                <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li>
            </ul>
        </nav>

    </header>
  </div>
</div>

向下滚动时显示导航

1 个答案: