如何使用 React 向下滚动淡化导航栏?
[英] How can I fade a navbar with a scroll down with React?
本文介绍了如何使用 React 向下滚动淡化导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在动画问题中使用 jQuery 和 React 是一个坏主意吗?使用带有状态的 css 类是否更好?
我有一个带有导航栏菜单的模板，但我希望向下滚动条以执行 jquery 淡入淡出，这是我的模板错误或如何添加这种效果
我的主模板名为landing.js
从'react'导入React；从'./Vitae-Plantilla/NavbarBoots'导入NavbarBoots；从'./Landing-Plantilla/NavbarLanding'导入NavbarLanding；从'./Landing-Plantilla/CabeceraLanding'导入CabeceraLanding；从'./Landing-Plantilla/CuerpoLanding'导入CuerpoLanding；从'./Landing-Plantilla/PieLanding'导入PieLanding；导出默认类 Landing extends React.Component {组件DidMount(){var scrollTop = $(window).scrollTop();$(窗口).滚动(功能(){如果(滚动顶部> 100){$('#.main_h').fadeOut();} 别的 {$('#.main_h').fadeIn();}});}使成为() {返回 (<div className="container-landing"><header id=".main_h"className=".main_h"><NavbarBoots/><div className="cabecera-landing"><CabeceraLanding title="Cabecera"副标题="el pais del nunca jamás."/>
</标题><div className="body-landing-"><div className="cuerpo-landing"><CuerpoLanding title="Acerca de mi."/>
<div className="馅饼着陆"><PieLanding title="馅饼"/>
);};//使成为}//登陆
这些是我页面的样式，但我怎样才能让导航栏也下降.
.container-landing {.main_h {背景:url(http://www.vqronline.org/sites/vqr.virginia.edu/files/story-images/petrusich_honis_opener_cssp_aur-mw_oct2015_1.jpg)中心不重复；位置:固定；顶部:0px；最大高度:70px；z-索引:999；宽度:100%；填充顶部:17px；背景:无；溢出:隐藏；-webkit-transition:全部为 0.3s；过渡:全0.3s；不透明度:0；顶部:-100px；填充底部:6px；字体系列:蒙特塞拉特"，无衬线；}.main_h .sticky{背景颜色:rgba(255, 255, 255, 0.93);不透明度:1；顶部:0px；边框底部:1px 固体 Gainsboro；}@media only screen and (max-width: 766px) {.main_h {填充顶部:25px；}}
解决方案
有一种反应友好"的方式来做到这一点(即，不使用 jquery 操作 DOM 元素):
componentDidMount(){window.onscroll =()=>{this.setState({currentScrollHeight: window.scrollY})}}
唯一的问题是它会在每次滚动高度改变时重新渲染，即使只有 1 个像素.如果这太贵了，您可以将值四舍五入到最接近的值，例如 50:
componentDidMount(){window.onscroll =()=>{const newScrollHeight = Math.ceil(window.scrollY/50) *50;如果 (this.state.currentScrollHeight != newScrollHeight){this.setState({currentScrollHeight: newScrollHeight})}}}
然后在渲染中，类似:
render(){const opacity = Math.min(100/this.state.currentScrollHeight , 1)return }
您可以尝试使用这些值(更改 100，也许给它一个起始值)以使其按照您想要的方式淡化.
或者，对于纯 css 库解决方案，您可能需要查看 http://scrollmagic.io/
除了将 jquery 与 react 混合使用之外，您所拥有的问题在于，fadeIn 和fadeOut 从字面上完全显示/隐藏元素，因此该元素将始终完全显示或隐藏(换句话说，它不会缓慢衰减).
is it true that using jQuery with React for animation issues, among others is a bad idea? is it better to use css classes with states?
I have this template with a navbar menu but I would like with the scroll down the bar to perform a jquery fade, which is wrong with my template or how can I add such effect
I have my main template called landing.js
import React from 'react';
import NavbarBoots from './Vitae-Plantilla/NavbarBoots';
import NavbarLanding from './Landing-Plantilla/NavbarLanding';
import CabeceraLanding from './Landing-Plantilla/CabeceraLanding';
import CuerpoLanding from './Landing-Plantilla/CuerpoLanding';
import PieLanding from './Landing-Plantilla/PieLanding';
export default class Landing extends React.Component {
componentDidMount () {
var scrollTop = $(window).scrollTop();
$(window).scroll(function(){
if(scrollTop > 100) {
$('#.main_h').fadeOut();
} else {
$('#.main_h').fadeIn();
}
});
}
render() {
return (
<div className="container-landing">
<header id=".main_h"className=".main_h">
<NavbarBoots/>
<div className="cabecera-landing">
<CabeceraLanding title="Cabecera" subtitle="el pais del nunca jamás."/>
</div>
</header>
<div className="body-landing-">
<div className="cuerpo-landing">
<CuerpoLanding title="Acerca de mi."/>
</div>
<div className="pie-landing">
<PieLanding title="pie"/>
</div>
</div>
</div>
);
}; // render
} // Landing
these are the styles of my page but how can I make the navbar go down too.
.container-landing {
.main_h {
background: url(http://www.vqronline.org/sites/vqr.virginia.edu/files/story-images/petrusich_honis_opener_cssp_aur-mw_oct2015_1.jpg) center no-repeat;
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
}
.main_h .sticky{
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid gainsboro;
}
@media only screen and (max-width: 766px) {
.main_h {
padding-top: 25px;
}
}
解决方案
There's a "react-friendly" way of doing this (i.e, without manipulating DOM element with jquery):
componentDidMount () {
window.onscroll =()=>{
this.setState({currentScrollHeight: window.scrollY})
}
}
The only problem with this is it will rerender literally every time the scroll height changes, even if by just 1 pixel. If that gets too expensive, you can round the value to the nearest, say 50:
componentDidMount () {
window.onscroll =()=>{
const newScrollHeight = Math.ceil(window.scrollY / 50) *50;
if (this.state.currentScrollHeight != newScrollHeight){
this.setState({currentScrollHeight: newScrollHeight})
}
}
}
And then in render, something like:
render(){
const opacity = Math.min(100 / this.state.currentScrollHeight , 1)
return <div style={{opacity}} id='element-you-want-to-fade'> </div>
}
You can experiment with the values (change 100, maybe give it a starting value) to get it to fade the way you want.
Alternatively, for a pure-css library solution, you may want to look into http://scrollmagic.io/
The problem with what you have, other than mixing jquery with react, is that fadeIn and fadeOut literally completely show/hide an element, so the element will always either be completely shown or hidden (in other words, it won't slow-fade).
这篇关于如何使用 React 向下滚动淡化导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
