Skip to content

Instantly share code, notes, and snippets.

@javierarques

javierarques/sticky.js

Last active September 7, 2025 17:52
Show Gist options
  • Save javierarques/36d3cd821c5a36acd352c11f88bbf2f4 to your computer and use it in GitHub Desktop.
Save javierarques/36d3cd821c5a36acd352c11f88bbf2f4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Javier revised this gist Jul 18, 2016. No changes.
  2. Javier revised this gist Jul 18, 2016. No changes.
  3. Javier revised this gist Jul 18, 2016. No changes.
  4. Javier revised this gist Jul 18, 2016. No changes.
  5. Javier revised this gist Jul 18, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion sticky.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,6 @@ var Sticky = (function() {
    this.onScroll();
    },
    aboveScroll: function() {
    console.log(this.position, window.scrollY);
    return this.position < window.scrollY;
    },
    onScroll: function(event) {
  6. Javier revised this gist Jul 18, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sticky.js
    View file
    Original file line number Diff line number Diff line change
    @@ -46,7 +46,7 @@ var Sticky = (function() {
    })();


    // Init Sticky Nav Bar
    // Init Sticky
    var sticky = document.querySelector('.sticky');
    if (sticky)
    Sticky.init(sticky);
  7. Javier renamed this gist Jul 18, 2016. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → sticky.js
    View file
    File renamed without changes.
  8. Javier created this gist Jul 18, 2016.
    52 changes: 52 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    // Sticky Nav Component
    var Sticky = (function() {
    'use strict';

    var CSS_CLASS_ACTIVE = 'is-fixed';

    var Sticky = {
    element: null,
    position: 0,
    addEvents: function() {
    window.addEventListener('scroll', this.onScroll.bind(this));
    },
    init: function(element) {
    this.element = element;
    this.addEvents();
    this.position = element.offsetTop ;
    this.onScroll();
    },
    aboveScroll: function() {
    console.log(this.position, window.scrollY);
    return this.position < window.scrollY;
    },
    onScroll: function(event) {
    if (this.aboveScroll()) {
    this.setFixed();
    } else {
    this.setStatic();
    }
    },
    setFixed: function() {
    this.element.classList.add(CSS_CLASS_ACTIVE);
    // not needed if added with CSS Class
    this.element.style.position = 'fixed';
    this.element.style.top = 0;
    },
    setStatic: function() {
    this.element.classList.remove(CSS_CLASS_ACTIVE);
    // not needed if added with CSS Class
    this.element.style.position = 'static';
    this.element.style.top = 'auto';
    }
    };

    return Sticky;

    })();


    // Init Sticky Nav Bar
    var sticky = document.querySelector('.sticky');
    if (sticky)
    Sticky.init(sticky);