时间戳

首页 > 解决方案 > React Bootstrap Sticky Navbar 在滚动过去的标题后向下滑动

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

问题描述

下面的代码片段几乎是我想要的一个例子（点击“运行代码片段”）

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?

在此片段中，导航栏在向下滚动后消失。我希望导航栏在滚动通过网站标题后出现，与导航栏在此代码段中所做的方式相同

我希望能够做到这一点

它本质上应该看起来像 stackoverflow 导航栏，但只有在滚动通过标题时才可见

标签： javascriptreactjstwitter-bootstrapbootstrap-4react-bootstrap

解决方案

我们要

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

相关的 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

推荐阅读