Signin  Pricing  Examples  Support

Libraries > headroom.js

headroom.js - Search Live Website Code
It's like doing CTRL+F on millions of websites' source code



NerdyData is a search engine for source code. Search the source code of 200 million websites.


JAVASCRIPT FILE http://metisc.com/templates/rt_anacron/js/headroom.js

Function Explorer




Libraries on metisc.com


mootools-mobile.js

rokmediaqueries.js

roksprocket.js

roksprocket.request.js

features.js

mosaic.js

script.js

browser-engines.js

bootstrap.min.js

jquery-migrate.min.js

jquery.min.js

jquery-noconflict.js

caption.js

core.js

mootools-core.js

mootools-more.js

rokmediaqueries.js

sidemenu.js

accordion.js

chart.js

headroom_init.js

headroom.js

metisc.js

rokmediaqueries.js

showcase.js



Explore More


ie.js

modernizr.js

respond.js

CheckScript.js

headroom.js
				
/*!
 * headroom.js v0.3.11 - Give your page some headroom. Hide your header until you need it
 * Copyright (c) 2013 Nick Williams - http://wicky.nillia.ms/headroom.js
 * License: MIT
 */

(function(global, $) {

  'use strict';

  window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

  /**
   * Handles debouncing of events via requestAnimationFrame
   * @see http://www.html5rocks.com/en/tutorials/speed/animations/
   * @param {Function} callback The callback to handle whichever event
   */
  function Debouncer (callback) {
    this.callback = callback;
    this.ticking = false;
  }
  Debouncer.prototype = {
    constructor : Debouncer,

    /**
     * dispatches the event to the supplied callback
     * @private
     */
    update : function() {
      this.callback && this.callback();
      this.ticking = false;
    },

    /**
     * ensures events don't get stacked
     * @private
     */
    requestTick : function() {
      if(!this.ticking) {
        requestAnimationFrame(this.update.bind(this));
        this.ticking = true;
      }
    },

    /**
     * Attach this as the event listeners
     */
    handleEvent : function() {
      this.requestTick();
    }
  };
  /**
   * UI enhancement for fixed headers.
   * Hides header when scrolling down
   * Shows header when scrolling up
   * @constructor
   * @param {DOMElement} elem the header element
   * @param {Object} options options for the widget
   */
  function Headroom (elem, options) {
    options = options || Headroom.options;

    this.lastKnownScrollY = 0;
    this.elem             = elem;
    this.debouncer        = new Debouncer(this.update.bind(this));
    this.tolerance        = options.tolerance;
    this.classes          = options.classes;
    this.offset           = options.offset;
    this.initialised      = false;
  }
  Headroom.prototype = {
    constructor : Headroom,

    /**
     * Initialises the widget
     */
    init : function() {
      $(this.elem).addClass(this.classes.initial);

      // defer event registration to handle browser
      // potentially restoring previous scroll position
      setTimeout(function(){
        this.attachEvent();
        this.update();
      }.bind(this), 100);
    },

    /**
     * Unattaches events and removes any classes that were added
     */
    destroy : function() {
      this.initialised = false;
      window.removeEventListener('scroll', this.debouncer, false);

      $(this.elem).removeClass(this.classes.unpinned);
      $(this.elem).removeClass(this.classes.pinned);
      $(this.elem).removeClass(this.classes.initial);
    },

    /**
     * Attaches the scroll event
     * @private
     */
    attachEvent : function() {
      if(!this.initialised){
        this.initialised = true;
        window.addEventListener('scroll', this.debouncer, false);
      }
    },

    /**
     * Unpins the header if it's currently pinned
     */
    unpin : function() {
      $(this.elem).addClass(this.classes.unpinned);
      $(this.elem).removeClass(this.classes.pinned);
    },

    /**
     * Pins the header if it's currently unpinned
     */
    pin : function() {
      $(this.elem).removeClass(this.classes.unpinned);
      $(this.elem).addClass(this.classes.pinned);
    },

    /**
     * Gets the Y scroll position
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
     * @return {Number} pixels the page has scrolled along the Y-axis
     */
    getScrollY : function() {
      return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    },

    /**
     * Handles updating the state of the widget
     */
    update : function() {
      var currentScrollY     = this.getScrollY(),
        toleranceExceeded    = Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance;

      if(currentScrollY < 0) { // Ignore bouncy scrolling in OSX
        return;
      }

      if(toleranceExceeded) {
        if(currentScrollY > this.lastKnownScrollY && currentScrollY >= this.offset) {
          this.unpin();
        }
        else if(currentScrollY < this.lastKnownScrollY) {
          this.pin();
        }
      }

      this.lastKnownScrollY = currentScrollY;
    }
  };
  /**
   * Default options
   * @type {Object}
   */
  Headroom.options = {
    tolerance : 0,
    offset: 0,
    classes : {
      pinned : 'headroom--pinned',
      unpinned : 'headroom--unpinned',
      initial : 'headroom'
    }
  };

  global.Headroom = Headroom;

}(this, document.id));


A B C D E F G H I J K L M N O P Q R S T U V W X Y Z