headroom.js 导航栏隐藏快速实现

前言

在许多浏览器中，我们都会看到网页顶部的导航栏会当我们滚动条下移的时候隐藏起来，当滚动条下移的时候又显示了出来，这个功能虽然手写一个也非常简单，但是有第三方库为什么不用呢？今天就来推荐一个库能够快速实现这个功能

headroom.js 是一个轻量级的 JavaScript 库，用于在页面滚动时隐藏或显示导航栏。它提供了简单易用的 API，可以轻松地集成到现有项目中。

使用方式

安装

npm

npm install headroom.js

yarn

yarn add headroom.js

基本使用

引入模塊以及css

import Headroom from 'headroom.js';
import './headroomjs.css';

实例化 headroom 对象，传入需要操作的元素，并且调用init方法

 const headroom = new Headroom(document.querySelector('header'));
  headroom.init();

试一试

滚动导航栏隐藏

Demo源码

import React, { useRef, useEffect } from 'react';
import Headroom from 'headroom.js';
import './headroomjs.css';

const HeadroomjsDemo = () => {
  const headerRef = useRef(null);

  useEffect(() => {
      setTimeout(() => {
          console.log("🚀 ~ useEffect ~ headerRef.current:", headerRef.current);
          if (headerRef.current) {
              const headroom = new Headroom(headerRef.current);
              headroom.init();
          }
      }, 3000);
  }, []);

  const boxStyle = {
      height: '10vh',
      marginBottom: '1vw',
      boxShadow: '0 0 10px #00000010',
      borderRadius: '1rem',
      backgroundColor: '#ddd'
  }

  const headerStyle = { background: '#37bcffde', padding: '10px', position: 'absolute', width: '100%', top: 0 } as React.CSSProperties

  return (
      <div style={{ position: 'relative', padding: '0', height: '30vh', overflow: 'scroll' }}>
          <header ref={headerRef} style={headerStyle}>
              <p>一个会隐藏的顶部导航栏</p>
          </header>
          <div style={{ padding: '20px' }}>
              <div style={boxStyle} />
              <div style={boxStyle} />
              <div style={boxStyle} />
          </div>
      </div>
  );
};

export default HeadroomjsDemo;

css

.headroom {
  transition: transform 200ms ease-in-out;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}