React реализации реагируют липкий

Question

Я пытаюсь выполнить следующие действия: https://www.npmjs.com/package/react-sticky

в моем коде следующим образом:

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». Однако навигатор продолжает прокручиваться, не застревая вообще. Я могу видеть, что divs применяются вокруг моей разметки с дополнительным дополнением, но не более того.

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;