sticky-filter-switcher-using-request-animation-frame.js

(function() {
  var banner_height = $('.collection-banner').height() + 220; //220 offset for header
  var stuck = false;
  var lastScrollY = 0;
  var ticking = false;

  var filter_dom;

  var update = function() {
    // do your stuff

    if(lastScrollY > banner_height) {
    	
    	console.log('stickying filters (' + lastScrollY + '>' + banner_height + ')');

    	

    	// add class for sticky filters
    	if(!$('#collection-description').hasClass('stuck')) {
    		$('#collection-description').addClass('stuck');
    	}

    	//and move outside content page
    	if(!stuck) {
    		var dom = $('#collection-description').detach();
    		dom.insertAfter('#mobile-only');
    		dom = null;
    	}
    	stuck = true;

    } else {

    	console.log('unsticking filters (' + lastScrollY + '>' + banner_height + ')');

    	

    	// remove class for sticky filters
    	if($('#collection-description').hasClass('stuck')) {
    		$('#collection-description').removeClass('stuck');
    	}

    	//move back in to content page
    	if(stuck) {
    		var dom = $('#collection-description').detach();
    		dom.insertAfter('#breadcrumb');
    		filter_dom = null;
    	}
    	stuck = false;
    }

    ticking = false;
  };

  var requestTick = function() {
    if (!ticking) {
      window.requestAnimationFrame(update);
      ticking = true;
    }
  };

  var onScroll = function() {
    lastScrollY = window.scrollY;
    requestTick();
  };

  $(window).on('scroll', onScroll);
})();