js吸顶导航

吸顶导航

当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。

吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如Banner图。
当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，一般吸顶导航栏还可以替换成文章标题栏，搜索框、tab条等等，例如百度糯米，天猫，淘宝最为常用。它们共同点是在内容或者功能上比较重要，但又不是最重要的元素，最重要的一般会放置于顶部。

吸顶方案

通过判断页面滚动高度，修改导航条的定位样式
滚动条滚动到一定高度触发吸顶的时候给header添加 fixed类名
滚动条滚动高度不到触发吸顶效果高度的时候移出fixed类名
触发高度 = 导航的 getPosition()
金蝉脱壳 > 导航条触发吸顶的时候给一个临时节点来占位一个空标签高度 = hedader的高度

吸顶案例

没吸顶时
在这里插入图片描述

吸顶时
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>吸顶导航</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/public.css">
  <link rel="stylesheet" href="css/header.css">
  <style>
    .cq-header {
      background-color: #222;
    }

    .cq-header.fixed {
      background-color: #fff;
      position: fixed;
    }

    .cq-header.fixed .cq-head-nav a {
      color: #222;
    }

    .fill-wrap {
      height: 490px;
      margin: 10px 0;
    }

    .bg222 {
      background-color: pink;
    }

    .bg960 {
      background-color: #960;
    }

    .bg0f5 {
      background-color: #0f5;
    }

    .bg368 {
      background-color: #368;
    }

    .fill-wrap.h80 {
      height: 80px;
    }
  </style>
</head>

<body>
  <div class="fill-wrap bg222 h80"></div>
  <div id="head" class="cq-header">
    <div class="cq-head-wrap w1160 flex flex-between">
      <div class="cq-head-logo">
        <h1>
          <span class="visib-hid">橙子</span>
          <a href="#">
            <img id="logo" src="images/logo-rev.png" width="92" height="36" alt="logo">
          </a>
        </h1>
      </div>
      <div class="cq-head-nav flex ">
        <ul class="flex ">
          <li><a href="#" class="pr10">首页</a></li>
          <li class="pull-list ">
            <ul class="pull-list-item">
              <li><a href="#">橙品牌</a></li>
              <li><a href="#">橙金融</a></li>
              <li><a href="#">橙积分</a></li>
              <li><a href="#">橙营销</a></li>
              <li><a href="#">橙福利</a></li>
            </ul>
          </li>
          <li><a href="#">橙权益</a></li>
          <li><a href="#">行业案例</a></li>
          <li><a href="#">新闻动态</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="fill-wrap bg222"></div>
  <div class="fill-wrap bg960"></div>
  <div class="fill-wrap bg0f5"></div>
  <div class="fill-wrap bg368"></div>

  <script src='js/common.js'></script>
  <script>
    var oHead = $('#head')
    var ceilTop = getPosition(oHead).top
    var oLogo = $('#logo')
    var temp 
    
    document.addEventListener('scroll', function () {
      console.log(getElementScroll())
      if(getElementScroll().top > ceilTop){
        if(!temp){
          temp = createDom()
          oHead.classList.add('fixed')
          oLogo.src ="images/logo.png"
        }
      }else{
        if(temp){
          oHead.classList.remove('fixed')
          oLogo.src ="images/logo-rev.png"
          temp.remove()
          temp = null
        }
      }
    }, false)

    function createDom () {  //占位元素
      var vDom = document.createElement('div')
      vDom.id = 'temp' 
      vDom.style.height = ceilTop + 'px'
      document.body.insertBefore(vDom, oHead)
      return {
        'remove': function(){
          vDom.remove();
        }
      }

    }
  </script>
</body>

</html>