React Umsetzung reagieren klebende

Question

Ich versuche folgendes zu implementieren: https://www.npmjs.com/package/react-sticky

in meinem Code wie folgt:

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; 

würde ich hoffen, dass, wenn „Sticky“ 100px von oben erreicht würde es bekommen Eine benutzerdefinierte Klasse "sticky-nav" wurde darauf angewendet. Das Navi scrollt jedoch weiter, ohne sich zu verklemmen. Ich kann die divs um mein Markup mit der zusätzlichen Polsterung sehen, aber nicht mehr als das.

URL Projekt: https://github.com/WebTerminator/aldemar, betreffende Datei ist 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;