如何使用React向下滚动导航栏？

对于动画问题，使用jQuery和React是否真的是一个坏主意？使用状态的CSS类更好吗？如何使用React向下滚动导航栏？

我有这样的模板与导航栏菜单，但我会与向下滚动条来执行一个jQuery褪色，这是不对的我的模板喜欢或者我怎么可以添加这样的效果

我有我的主模板称为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

这些是我的页面的样式，但我怎么能让导航栏也停下来。

.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; 
     } 
    }

来源

2017-10-12 Gerardo Bautista

一般来说，我会说在可能的情况下使用CSS动画优于jQuery或任何JavaScript衍生的动画方法。原因是由css本身实现的动画可以从优化与GPU的操作的浏览器中受益。通常，使用javascript完成的动画将涉及对DOM进行频繁更改，这将导致频繁的页面重绘，从性能角度来看，以及可能的动画流动流，这是一件坏事。这是我从我自己的个人研究中收集到的。 – Taplar

有这样做（即没有操作使用jQuery DOM元素）的“反应型”的方式：

componentDidMount() {  
    window.onscroll =()=>{ 
     this.setState({currentScrollHeight: window.scrollY}) 
    } 
}

与此唯一的问题是它会从字面上每次重新呈现滚动高度变化，即使只有1个像素。如果过于昂贵，可以舍入值最接近的，说50：

componentDidMount() {  
    window.onscroll =()=>{ 
    const newScrollHeight = Math.ceil(window.scrollY/50) *50; 
    if (this.state.currentScrollHeight != newScrollHeight){ 
     this.setState({currentScrollHeight: newScrollHeight}) 
    } 
    } 
}

然后在渲染，是这样的：

render(){ 
    const opacity = Math.min(100/this.state.currentScrollHeight , 1) 

    return <div style={{opacity}} id='element-you-want-to-fade'> </div> 
}

您可以用值进行试验（改100，也许给它一个初始值）让它淡出你想要的方式。

另外，对于纯CSS库解决方案，你可能想看看http://scrollmagic.io/

的问题，你有什么，比反应混合的jQuery等，是淡入和淡出字面上完全显示/隐藏元素，所以元素总是会被完全显示或隐藏（换句话说，它不会缓慢褪色）。

来源

2017-10-13 00:05:46 DZack

嗨DZack我有一个问题，声明常量不透明度告诉我TypeError：this.state为null，我该如何解决它 –

你应该声明你在组件的构造函数中的状态： 'constructor（props）{ this.state = { opacity：0 } }' – DZack

如何使用React向下滚动导航栏？

回答

相关问题