Я создал компонент React для фиксированного nav, который я бы хотел скрывать, пока я не прокручу мимо определенной точки на странице, а затем покажут в поле зрения. Medium имеет заголовок, похожий на то, что я описываю.
Это относительно тривиальная задача в jQuery, с прокруткой или путевыми точками, но есть ли идиоматический способ выполнить это с помощью React and vanilla JS?
Вы можете использовать компонент, например react-headroom, чтобы сделать тяжелую работу для вас. Или вы все равно можете использовать путевые точки в React, настроив его в методе жизненного цикла componentDidMount и удалив его с помощью componentWillUnmount.
Реагировать с ванили JS jsfiddle;
не забудьте удалить EventListener. В этом примере компонент будет отображаться, если только это необходимо
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>;
}
}
В хукере жизненного цикла componentDidMount сделайте то же самое, что и в приведенной ссылке jQuery:
class Navbar extends React.component {
let delta = 5;
render() {
return (
<div ref=header></div>
);
}
componentDidMount() {
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(Math.abs(this.state.lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// downscroll code
// $(this.refs.header).css('visibility','hidden').hover ()
this.setState({
navbarVisible: false
});
} else {
// upscroll code
$(this.refs.header).css('visibility','visible');
this.setState({
navbarVisible: true
});
}
lastScrollTop = st;
}.bind(this));
}
}
Я создал компонент реакции для этой же самой точной потребности, поскольку я не мог найти никаких других реализаций, которые соответствовали бы тем, что мне было нужно. Даже react-headroom не дал вам то, что просто прокручивалось после достижения определенной точки на странице.
Суть здесь: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba
Я не вижу причин для копирования кода компонента здесь. Код в значительной степени основан на коде react-headroom, но делает меньше и, следовательно, проще.
Компонент является первой частью кода, вы можете просто скопировать/вставить, а затем импортировать его. После импорта кода с помощью navbar будет выглядеть примерно так:
class MyScrollInNavBar extends Component {
render() {
return (
<ScrollInNav scrollInHeight={150}>
<MyNavBar />
</ScrollInNav>
);
}
}