React Bootstrap Sticky Navbar,在滚动过头后向下滑动。

问题描述 投票:0回答:1

下面的片段几乎就是我想要的一个例子(点击"运行代码缩略图")

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?
  

在这个代码段中,向下滚动后导航条消失。我想让导航条在滚动过网站标题后出现,就像这个代码段中的导航条一样。

我希望能够做到这一点

  • 使用 BootstrapReact,
  • 让导航条成为 隐形,
  • 并拥有 滑动到屏幕顶部固定在滚动头后的屏幕上。
  • 尽可能少地使用自定义CSS

它应该看起来像stackoverflow导航条一样,但只有在滚动过头条时才会可见

javascript reactjs twitter-bootstrap bootstrap-4 react-bootstrap
1个回答
1
投票

我们需要

  • 为滚动事件添加一个监听器,并在滚动事件超过页眉(例如高度120px)时切换 "flag-for-navigation-visibility"。
  • 接下来根据 "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;

工作 这里是堆栈闪电战


0
投票

像阿克伯的答案(它有一个完整的编辑队列),但这个符合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
}
© www.soinside.com 2019 - 2024. All rights reserved.