Html5导航栏吸顶方案原理与对比实现

下面是对于“Html5导航栏吸顶方案原理与对比实现”的详细讲解攻略。

概述

导航栏作为网页中非常基础、常见的组件，它起到了指引浏览者游览的作用。当用户向下滚动网页时，如果导航栏随着页面一起滚动，则有可能会失去焦点或被淹没。因此一个好的导航栏吸顶方案必须考虑用户体验和设计的美观性。

实现原理

导航栏吸顶时，需要将导航栏固定在网页中某个位置，同时需要在导航栏变成吸顶状态时，进行一些样式的调整使得用户体验更佳。常见的实现方法有两种：

使用JavaScript监听scroll事件：当浏览器窗口的滚动交互事件发生时，通过JavaScript计算导航栏应该吸附在窗口的哪个位置，并且随之改变导航栏的css。
使用CSS的position: sticky属性：该CSS属性能够在元素到达其初始位置时，让该元素“起点粘附”屏幕边缘，当元素的位置达到父元素的尽头时，仍然保持在屏幕上，直到屏幕上下滚动超过时才解除粘附状态，让该元素下拉。

对比实现方案

两种实现方案有各自的优点和缺点。下面我们来进行对比实现：

对于JavaScript监听scroll事件实现方案，优势在于它能够支持更多的浏览器环境，包括IE8等浏览器。不过在性能方面稍好，因为它需要在每一个scroll事件发生时进行JavaScript计算，计算量随着滚动事件的频繁发生而变得较大。

js window.onscroll = function() { var scroH = document.documentElement.scrollTop; if 　(scroH > 0) { document.getElementById("nav").className = "navbar-fixed-top";//改变导航栏css } else { document.getElementById("nav").className = "";//改变导航栏css } }
对于CSS属性position: sticky实现方案，优势在于性能较好，因为它不需要频繁计算。不过它的兼容性较差，需要排除掉某些早期浏览器或iOS上的某些版本。此外，一些浏览器可能存在BUG导致sticky属性不正常工作。

css .sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; }

示例说明

下面我们通过两个实例来说明以上两种吸顶方案的具体实现。

实例1 - JavaScript监听事件

<!DOCTYPE html>
<html>
  <head>
    <title>js监听scroll事件实现导航栏吸顶</title>
    <meta charset="UTF-8">
    <style type="text/css">
      .nav {
        position: relative;
        height: 80px;
        background-color: #eee;
      }
      .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 80px;
        padding: 20px;
        box-sizing: border-box;
        font-size: 30px;
        font-weight: bold;
        color: #222;
        text-decoration: none;
      }
      .nav li {
        display: inline-block;
        margin-left: 20px;
        margin-top: 25px;
        font-size: 20px;
        font-weight: bold;
        color: #222;
        text-decoration: none;
      }
      .navbar-fixed-top {
        position:fixed;
        top:0;/*吸附位置*/
        width:100%;
        z-index:100;/* z-index要高于其他元素 */
      }
    </style>
  </head>
  <body>
    <nav id="nav" class="nav">
      <a class="logo" href="#">LOGO</a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <div style="height: 2000px">test</div>
    <script type="text/javascript">
      window.onscroll = function () {
        var nav = document.getElementById('nav');
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//计算滚动高度
        if (scrollTop > 0) {
          nav.className = 'navbar-fixed-top';//改变导航栏css
        } else {
          nav.className = 'nav';//改变导航栏css
        }
      };
    </script>
  </body>
</html>

在上述代码中，我们使用了JavaScript监听scroll事件，实现了导航栏吸顶效果。

实例2 - CSS属性position: sticky

<!DOCTYPE html>
<html>
  <head>
    <title>CSS实现导航栏吸顶</title>
    <meta charset="UTF-8">
    <style type="text/css">
      .nav {
        position: relative;
        height: 80px;
        background-color: #eee;
      }
      .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 80px;
        padding: 20px;
        box-sizing: border-box;
        font-size: 30px;
        font-weight: bold;
        color: #222;
        text-decoration: none;
      }
      .nav ul {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 60px;
        padding: 20px;
        margin: 0 0 0 0;
        background-color: transparent;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        list-style-type: none;
      }
      .nav li {
        display: inline-block;
        margin-left: 20px;
        font-size: 20px;
        font-weight: bold;
        color: #222;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <nav id="nav" class="nav">
      <a class="logo" href="#">LOGO</a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <div style="height: 2000px">test</div>
  </body>
</html>

在上述代码中，我们使用了CSS属性position: sticky，实现了导航栏吸顶效果。需要注意的是，在Webkit内核的浏览器上，该属性的名称为-webkit-sticky。

通过以上两个实例，我们可以看到JavaScript监听scroll事件可以在较低的兼容性和一定的性能上，实现导航栏的吸顶效果；而CSS属性position: sticky虽然兼容性稍有不足，但是优点在于实现简易、性能高效，如果能够兼容性能满足需求，优先建议使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Html5导航栏吸顶方案原理与对比实现 - Python技术站