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;

我希望当＆＃34; Sticky＆＃34;从顶部达到100px它将获得一个自定义类＆＃34; sticky-nav＆＃34;适用于它。然而导航保持滚动而不会卡住。我可以通过额外的填充看到我的标记周围的div应用但不多了。

网址项目：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;

反应实施反应粘性

1 个答案: