向下滚动时显示导航

Question

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

我已经尝试了几个不同的插件，他们几乎工作。在一个我目前看到的是“jQuery的亮相导航”

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

这非常近做什么，我想它。一旦脚本处于“活动”状态，它可以处理一些类。因为我只想在脚本处于活动状态时添加背景颜色。所以它会是透明的，直到导航离开屏幕并且不在顶部。

此外，我知道这个导航，如果你回滚了这么一半的导航是在视图中，它会很快调整，所以你可以看到它的整个酒吧。但我非常喜欢这个想法，它只显示你滚动的那么多。因此，如果导航栏高度为100px，并且滚动30px，则只能看到栏的底部30px。向下滚动会再次隐藏栏，逐个像素 - 是否有意义？

所以步骤将是（如果这使它更清晰）：在页面，透明背景的顶部

1. 头。
2. 当向下滚动时，导航离开屏幕。
3. 当用户滚动回来时，标题开始显示它是自己的 - 这次是背景颜色。
4. 一旦头再次碰到浏览器的顶部，背景被删除。

我的标记非常简单。该栏只保留一个徽标和导航切换，因为导航处于隐藏状态，直到点击切换，这会显示导航全屏。

<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> 

我已经删除了SVG我有内page-head__home-link否则这将是一个代码墙！

希望有人能帮助:)

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>