は反応し-スティッキー私は、次の実装しようとしています

Question

実装反応

import React from 'react'; 

import Video  from './../video.jsx'; 
import Overview from './overview.jsx'; 
import Photography from './photography.jsx'; 
import Details  from './details.jsx'; 
import Cast  from './cast.jsx'; 

import porgectsCollection from './../../data/projectInfo.js'; 

import { StickyContainer, Sticky } from 'react-sticky'; 

class Nav extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     mobileMenu: false 
    }; 
    } 
    showMobileMenu() { 
    this.setState({ mobileMenu: !this.state.mobileMenu }); 
    } 
    render() { 
    let links = this.props.project.links.map(function(el, i){ 
     return <li key={i}>{el}</li>; 
    }); 
    const open = this.state.mobileMenu ? ' open' : ''; 

    return (
     <StickyContainer> 
     <span onClick={this.showMobileMenu.bind(this)} className="mobile-trigger">X</span> 
      <Sticky topOffset={100} stickyClassName="sticky-nav"> 
      <nav className={"secondary-nav" + open}> 
       <ul> 
       {links} 
       </ul> 
      </nav> 
      </Sticky> 
     </StickyContainer> 
    ); 
    } 
} 

class SingleProject extends React.Component { 
    getProjectDataFromUrl() { 
    return porgectsCollection.filter(el => el.title === this.props.params.id); 
    } 
    render() { 
    let data = this.getProjectDataFromUrl(), 
     project = data[0]; 
     console.log(project); 
    return (
     <section className="project-page"> 
      <Video project={project} /> 
      <Nav project={project} /> 
      <Overview project={project} /> 
      <Photography project={project} /> 
      <Details project={project} /> 
      <Cast project={project} /> 
     </section> 
    ); 
    } 
} 

export default SingleProject; 

私は「スティッキー」は上から100pxに達したときに、それはなるだろうことを望んでいるだろうカスタムクラスの "sticky-nav"が適用されます。しかし、navはスティックしないでスクロールし続けます。マークアップの周りに余分なパディングを適用したdivが表示されますが、それ以上は表示されません。

URLプロジェクト：https://github.com/WebTerminator/aldemar、問題の ファイルが解決singleProject.jsx

Answer 1

import React from 'react'; 

import Video  from './../video.jsx'; 
import Overview from './overview.jsx'; 
import Photography from './photography.jsx'; 
import Details  from './details.jsx'; 
import Cast  from './cast.jsx'; 

import porgectsCollection from './../../data/projectInfo.js'; 

import { StickyContainer, Sticky } from 'react-sticky'; 

class Nav extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     mobileMenu: false 
    }; 
    } 
    showMobileMenu() { 
    this.setState({ mobileMenu: !this.state.mobileMenu }); 
    } 
    render() { 
    let links = this.props.project.links.map(function(el, i){ 
     return <li key={i}>{el}</li>; 
    }); 
    const open = this.state.mobileMenu ? ' open' : ''; 

    return (
     <Sticky stickyClassName="sticky-nav" topOffset={-100}> 
     <span onClick={this.showMobileMenu.bind(this)} className="mobile-trigger">X</span> 
     <nav className={"secondary-nav" + open}> 
      <ul> 
      {links} 
      </ul> 
     </nav> 
     </Sticky> 
    ); 
    } 
} 

class SingleProject extends React.Component { 
    getProjectDataFromUrl() { 
    return porgectsCollection.filter(el => el.title === this.props.params.id); 
    } 
    render() { 
    let data = this.getProjectDataFromUrl(), 
     project = data[0]; 
    return (
     <section className="project-page"> 
     <StickyContainer> 
      <Video project={project} /> 
      <Nav project={project} /> 
      <Overview project={project} /> 
      <Photography project={project} /> 
      <Details project={project} /> 
      <Cast project={project} /> 
     </StickyContainer> 
     </section> 
    ); 
    } 
} 

export default SingleProject;