Skip to content

Instantly share code, notes, and snippets.

@swestphal

swestphal/App.js

Forked from koistya/App.js
Created January 10, 2021 15:32
Show Gist options
  • Save swestphal/cd74e75a82787102dbfc66bcfff87049 to your computer and use it in GitHub Desktop.
Save swestphal/cd74e75a82787102dbfc66bcfff87049 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @koistya koistya revised this gist Aug 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ let ticking = false;

    class App extends React.Component {
    componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('scroll', this.handleScroll, true);
    }

    componentWillUnmount() {
  2. @koistya koistya revised this gist Jul 4, 2018. No changes.
  3. @koistya koistya revised this gist Jul 4, 2018. 1 changed file with 15 additions and 3 deletions.
    18 changes: 15 additions & 3 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,30 @@
    import React from 'react';

    let lastScrollY = 0;
    let ticking = false;

    class App extends React.Component {
    componentDidMount() {
    document.documentElement.addEventListener('scroll', this.handleScroll);
    window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('scroll', this.handleScroll);
    }

    nav = React.createRef();

    handleScroll = () => {
    this.nav.current.style.top = document.documentElement.scrollTop + 'px';
    lastScrollY = window.scrollY;

    if (!ticking) {
    window.requestAnimationFrame(() => {
    this.nav.current.style.top = `${lastScrollY}px`;
    ticking = false;
    });

    ticking = true;
    }
    };

    render() {
  4. @koistya koistya renamed this gist Jul 4, 2018. 1 changed file with 0 additions and 0 deletions.
    0 Application.js → App.js
    View file
    File renamed without changes.
  5. @koistya koistya revised this gist Jul 4, 2018. 1 changed file with 19 additions and 22 deletions.
    41 changes: 19 additions & 22 deletions Application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,28 @@
    'use strict';

    var React = require('react');
    var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    var Application = React.createClass({
    import React from 'react';

    class App extends React.Component {
    componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.addEventListener('scroll', this.handleScroll);
    }
    },
    document.documentElement.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    },
    }

    nav = React.createRef();

    handleScroll = () => {
    this.nav.current.style.top = document.documentElement.scrollTop + 'px';
    };

    render() {
    return <div>
    <nav ref="nav">
    </nav>
    <div>;
    },

    handleScroll() {
    this.refs.nav.getDOMNode().style.top = document.documentElement.scrollTop + 'px';
    return (
    <div>
    <nav ref={this.nav}>
    </nav>
    <div>
    );
    }
    }

    });

    module.exports = Application;
    export default App;
  6. @koistya koistya revised this gist Jan 14, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions Application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,7 @@ var Application = React.createClass({
    },

    componentWillUnmount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    }
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    },

    render() {
  7. @koistya koistya revised this gist Jan 14, 2015. 1 changed file with 18 additions and 18 deletions.
    36 changes: 18 additions & 18 deletions Application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,24 +5,24 @@ var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    var Application = React.createClass({

    componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.addEventListener('scroll', this.handleScroll);
    }
    },

    componentWillUnmount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    }
    },

    render() {
    return <div>
    <nav ref="nav">
    </nav>
    <div>;
    },
    componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.addEventListener('scroll', this.handleScroll);
    }
    },

    componentWillUnmount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    }
    },

    render() {
    return <div>
    <nav ref="nav">
    </nav>
    <div>;
    },

    handleScroll() {
    this.refs.nav.getDOMNode().style.top = document.documentElement.scrollTop + 'px';
  8. @koistya koistya created this gist Jan 14, 2015.
    33 changes: 33 additions & 0 deletions Application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    'use strict';

    var React = require('react');
    var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    var Application = React.createClass({

    componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.addEventListener('scroll', this.handleScroll);
    }
    },

    componentWillUnmount() {
    if (ExecutionEnvironment.canUseDOM) {
    document.documentElement.removeEventListener('scroll', this.handleScroll);
    }
    },

    render() {
    return <div>
    <nav ref="nav">
    </nav>
    <div>;
    },

    handleScroll() {
    this.refs.nav.getDOMNode().style.top = document.documentElement.scrollTop + 'px';
    }

    });

    module.exports = Application;