React 实现 react-sticky答案

【问题标题】：React implementing react-stickyReact 实现 react-sticky
【发布时间】：2016-10-26 11:46:56
【问题描述】：

我正在尝试实现以下内容：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;

我希望当“Sticky”从顶部达到 100 像素时，它会应用一个自定义类“sticky-nav”。然而，导航继续滚动而不会卡住。我可以看到带有额外填充的标记周围应用的 div，但仅此而已。

网址项目：https://github.com/WebTerminator/aldemar, 有问题的文件是 singleProject.jsx

【问题讨论】：

问题解决了，我把粘性包装纸放错地方了。

标签： reactjs react-sticky

【解决方案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;

【讨论】：