下面的片段几乎就是我想要的一个例子(点击"运行代码缩略图")
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导航条一样,但只有在滚动过头条时才会可见
我们需要
相关 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;
工作 这里是堆栈闪电战
像阿克伯的答案(它有一个完整的编辑队列),但这个符合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
}