一个正确的导航栏实现方式

Posted on

不能自动隐藏的导航栏都是不合格的导航栏。

为什么这么说呢，因为使用空格键或翻页键的时候，不隐藏的导航栏会始终占用页面顶上的一部分空间。导致大部分时候空格键或翻页键处于不可用状态。在键盘这么空间极度有限的情况下能分配出三个键用来改进用户的阅读体验，却被大部分开发者忽略了。

在 chrome 浏览器上经试验，会留几十像素的冗余，具体多少是根据你窗口大小来的，为的是方便看到上次阅读到哪里了。

为了解决这问题先看下浏览器滚动是怎么工作的。通过开发这工具发现，当一个网页超出一屏的显示范围的时候，html，body 的高度是整个内容高度，而不是窗口的高度。这样会导致我们整个网页在滚动的时候实际上是滚动的html里面所有的内容。

了解了问题所在，解决起来就方便多了。下面提供三种方案：

方案一：限制html的高度为整个窗口的高度。首先html 和 body 高度要是窗口的高度，不能被内容撑高。二是滚动条不能作用在 html 上面，也不能是 body 上面，而是直接滚动内容区域 。三是在内容区域添加滚动条。使用 flexbox 能很简单就实现一部分定宽／高，另外一部分自适应宽／高，看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html class="full-height">
<head>
<meta charset="utf-8">
<title>truly navigation</title>
<style type="text/css">
  * {
    box-sizing: border-box;
  }
  html {
  }
  body {
    margin: 0;
  }
  nav {
    background-color: rgba(2,2,2, .5);
    color: white;
    /*position: fixed;*/ /* 注意这里 */
    height: 40px;
    line-height: 40px;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
  }
  .container {
    overflow: auto;
  }
  .full-height {
    height: 100%;
  }
  .flex-vertical {
    display: flex;
    flex-direction: column;
  }
  .flex-none {
    flex: none;
  }
  .flex-auto {
    flex: auto;
  }
</style>
</head>
<body class="full-height flex-vertical">
    <nav class="flex-none">truly navigation</nav>
    <section class="container flex-auto">
        <article class="article">
        <!-- content here -->
        </article>
    </section>
</body>
</html>

demo

方案二：自动隐藏导航栏。这种方式应该是最优雅的吧。最主要是能提供沉浸式阅读体验。下面的代码是通过判断窗口的滚动高度来实现。当然你也可以通过判断滚动方向来实现。

1
2
3
4
5
6
7
8
9
10
11
window.addEventListener("scroll", function(e) {
    handleScroll()
})
function handleScroll() {
    if (window.scrollY > 40) {
        document.getElementByTagName("nav").classList.add("nav-hide")
    } else {
        document.getElementByTagName("nav").classList.remove("nav-hide")
    }
}

demo

方案三：也是最简单的，直接让滚动条跟随窗口一起滚动。这里就不提供实现代码了。