智慧导航：教你轻松使用Javascrip实现网页固定导航栏功能

技术分享菌

已于 2023-11-18 12:30:26 修改

阅读量756

点赞数 8

分类专栏：前端文章标签： html5 javascript css html 前端

于 2023-11-14 23:01:40 首次发布

本文链接：https://blog.csdn.net/m0_55392280/article/details/134409330

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

提示：本文为原创内容

文章目录

前言

固定导航栏 是一种在网页或小程序中始终保持在页面固定位置的导航设计。这种设计风格便于用户在浏览页面时快速找到和访问导航栏上的功能。通过对导航栏元素进行定位和设置固定位置，可以实现固定效果。本文通过 JavaScript 代码实现 导航栏 滚动指定位置就固定，固定导航栏不仅提高了用户体验，还有助于突出网站或小程序的层次结构和功能模块。

一、固定导航栏是什么？

固定导航栏 是一种网页或小程序设计元素，它是指在页面或小程序中，导航栏始终固定在屏幕的某个位置，不受页面或小程序滚动影响。固定导航栏的设计风格便于用户在浏览页面时快速找到和访问导航栏上的功能，提高了用户体验

二、功能实现

1.页面效果图

2.HTML部分

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定导航栏</title>
</head>
<body>
  <div class="header">导航栏</div>
  <div class="header-fix">导航栏</div>
  <div class="banner container">banner区域</div>
  <div class="content container">内容区域</div>
</body>
</html>

该处使用四个div元素，分别是导航栏，当滚动到 banner区域时固定顶部的导航栏，banner区域和内容区域。

3. CSS部分

 /* 清除默认样式 */
     * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
     /* 设置body高度为3000px，页面就有滚动条显示 */
    body {
      height: 3000px;
    }

    /* 版心 */
    .container {
      width: 1240px;
      margin: 0 auto;
    }

    /* 头部导航栏 */
    .header {
      margin-bottom: 15px;
      width: 100%;
      height: 80px;
      background-color: palegreen;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      color: white;
    }
    /* 头部导航栏 当页面滚动到 banner区域就固定在顶部 */
    .header-fix {
      position: fixed;
      top: -80px;
      left: 0;
      margin-bottom: 15px;
      width: 100%;
      height: 80px;
      background-color: palegreen;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      color: white;
      transition: all 0.3s;
    }

    /* banner区域 */
    .banner,.content{
      margin-bottom: 15px;
      height: 350px;
      background-color: deepskyblue;
      line-height: 350px;
      text-align: center;
      font-size: 24px;
    }
    .content{
      background-color: deeppink;
      height: 550px;
    }

header-fix 头部导航栏当页面滚动到 banner区域就固定在顶部，开始隐藏在页面顶部外面

top：-80px 因为导航高度为80px 所以给它 -80px，开始让它隐藏在顶部

4.JavaScrip部分

    const banner = document.querySelector('.banner')
    const header_fix = document.querySelector('.header-fix')
    // 1. 页面滚动事件
    window.addEventListener('scroll', function () {
      // 当页面滚动到banner区域，就改变 头部固定区域top值
      // 页面被卷去的头部 >=  banner模块的位置 offsetTop
      const n = document.documentElement.scrollTop
      /* if (n >= banner.offsetTop) {
        header_fix.style.top = 0
      } else {
        header_fix.style.top = '-80px'
      } */
      header_fix.style.top = n >= banner.offsetTop ? 0 : '-80px'
    })

页面滚动事件 当页面滚动到banner区域，就改变头部固定区域top值，将 -80px 改成 0

核心思路：页面被卷去的头部 >= banner模块的位置 offsetTop

代码中注释if else 判断写法，留下的简洁的三元运算符的写法

5.整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定导航栏</title>
  <style>
     /* 清除默认样式 */
     * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 3000px;
    }

    /* 版心 */
    .container {
      width: 1240px;
      margin: 0 auto;
    }

    /* 头部导航栏 */
    .header {
      margin-bottom: 15px;
      width: 100%;
      height: 80px;
      background-color: palegreen;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      color: white;
    }

    .header-fix {
      position: fixed;
      top: -80px;
      left: 0;
      margin-bottom: 15px;
      width: 100%;
      height: 80px;
      background-color: palegreen;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      color: white;
      transition: all 0.3s;
    }

    /* banner区域 */
    .banner,.content{
      margin-bottom: 15px;
      height: 350px;
      background-color: deepskyblue;
      line-height: 350px;
      text-align: center;
      font-size: 24px;
    }
    .content{
      background-color: deeppink;
      height: 550px;
    }
  </style>
</head>
<body>
  <div class="header">导航栏</div>
  <div class="header-fix">导航栏</div>
  <div class="banner container">banner区域</div>
  <div class="content container">内容区域</div>
  <script>
    const banner = document.querySelector('.banner')
    const header_fix = document.querySelector('.header-fix')
    // 1. 页面滚动事件
    window.addEventListener('scroll', function () {
      // 当页面滚动到banner区域，就改变 头部固定区域top值
      // 页面被卷去的头部 >=  banner模块的位置 offsetTop
      const n = document.documentElement.scrollTop
      /* if (n >= banner.offsetTop) {
        header_fix.style.top = 0
      } else {
        header_fix.style.top = '-80px'
      } */
      header_fix.style.top = n >= banner.offsetTop ? 0 : '-80px'
    })
  </script>
</body>
</html>

总结

本文章通过 CSS 样式、 JavaScript 代码，实现固定导航栏的功能。主要通过JavaScrip L2 滚动事件监听，当页面滚动指定区域，就给固定导航栏固定在顶部，在实际应用中，固定导航栏可以根据需求进行定制，如设置不同的样式、在不同滚动位置切换等。这使得固定导航栏具备了较高的灵活性和适应性。
总之，固定导航栏是现代网页和小程序设计中的一项重要技术，值得开发者学习和掌握。在掌握基本实现方法的基础上，开发者还可以进一步探索固定导航栏的更多应用场景和优化技巧，以提高自身的设计水平和开发能力。