React Bootstrap Sticky Navbar 在滚动过去的标题后向下滑动

Question

下面的sn-p几乎就是我想要的一个例子（点击“Run Code Snippet”）

class TopBar extends React.Component {
    constructor(props){
      super(props);
      this.state={isHide:false};
      this.hideBar = this.hideBar.bind(this)
    }
    hideBar(){
       let {isHide} = this.state
       window.scrollY > this.prev?
       !isHide && this.setState({isHide:true})
       :
       isHide && this.setState({isHide:false})

       this.prev = window.scrollY;
    }
    componentDidMount(){
        window.addEventListener('scroll',this.hideBar);
    }
    componentWillUnmount(){
         window.removeEventListener('scroll',this.hideBar);
    }
    render(){

        let classHide=this.state.isHide?"hide":""
        return <div className={"topbar "+classHide}>topbar</div>;
    }
}

ReactDOM.render(<TopBar/>,document.getElementById('root'));

.topbar{
  position: fixed;
  height:40px;
  left:0;
  top:0;
  background-color: #fff;
  width:100%;
  text-align:center;
  font-size:22px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  transition:top .3s;
}

.hide{

  top:-40px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
  <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
    <br><br><br>
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa nostrum explicabo modi magni suscipit ipsam ducimus non iste. Iste quam quaerat doloremque aliquam commodi architecto qui voluptates laboriosam, fuga?
  

在这个 sn-p 中，导航栏在向下滚动后消失。我希望导航栏在滚动通过网站标题后出现，就像导航栏在这个 sn-p 中所做的那样

我希望能够做到这一点

• 使用 Bootstrap 和 React，
• 让导航栏一开始是不可见的，
• 并让它在滚动过标题后滑到固定在顶部的屏幕上
• 尽可能少地使用自定义 CSS

它应该看起来像 stackoverflow 导航栏，但只有在滚动到标题后才能看到

Answer 1

我们需要

• 为滚动事件添加一个监听器，并在它超过标题时切换“导航可见性标志”（例如高度 120 像素）；
• 接下来根据“flag-for-navigation-visibility”切换正确的类

相关的CSS：

.showBar{display:block}
.hideBar{display:none;}

相关组件：

import React, { useState, useEffect } from "react";

const TopBar = () => {
  const [barVisibility, setBarVisibility] = useState(false);
  const [scrollPosition, setSrollPosition] = useState(0);
  const handleScroll = () => {
    const position = window.pageYOffset;
    position >= 120 ? setBarVisibility(true) : setBarVisibility(false);
    setSrollPosition(position);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div id="topBar" className={barVisibility ? "showBar" : "hideBar"}>
      <nav className="navbar navbar-expand-sm bg-light fixed-top">
        <h1>This is the top bar...</h1>
      </nav>
    </div>
  );
};

export default TopBar;

工作stackblitz here

Answer 2

就像 Akber 的答案（它有一个完整的编辑队列），但这个适合 NavBar 滑入和滑出的条件，并允许您为 Navbar 分配阴影。根据页面位置删除或添加 NavBar 的重要性线是const pos = window.pageYOffset;

import React, {useState, useEffect} from 'react'
import './style.css'

const TopBar = () => {
  const [isHidden, setIsHidden] = useState(false);

  const hideBar = () => {
    const pos = window.pageYOffset;
    pos > 120 ? setIsHidden(true) : setIsHidden(false) 
  }

  useEffect(() => {
    window.addEventListener("scroll", hideBar, { passive: true });

    return () => {
      window.removeEventListener("scroll", hideBar);
    };
  }, []);

  let classHide=isHidden?"hide":""
  return <div className={`topbar ${classHide}`}>topbar</div>;
}

export default TopBar

CSS

.topbar{
  position: fixed;
  height:40px;
  left:0;
  top:0;
  background-color: #fff;
  width:100%;
  text-align:center;
  font-size:22px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
  transition:top .3s;
}

.hide{

  top:-40px
}