Sticky floating animated box using CSS transform and JS

Suryakant Patil

This code makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This Code solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.
Not using CSS position absolute and fixed So Responsive layout you can make any element floatable. You can also Stick element in between boundaries.

HTML:

 width="100%" height="100%" cellspacing="0" cellpadding="0">

    

        
    

 colspan="2">Header

width="70%" valign="top">
Content valign="top">

class="sticky">Sticky Box

colspan="2">

Footer CSS:

.sticky{ transform: translateY(0px);-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s;}

Javascript:

var isMoz = $.browser.mozilla;
  var mozMatrix = /matrix\(\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*\,\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/;
  function getMozTransformProp(prop) {
      var mMatrix = { y: 0 };
      var match = transformString.match(mozMatrix);
      if (match) { mMatrix.y = match[2]; }
      return mMatrix;
  }
  var flot = $('.sticky'); //Sticky element Classname or Id
  var _top = flot.offset().top;

  var getMatrix = null;
  getMatrix = window.getComputedStyle(flot.get(0));
  var matrix;
  if (!isMoz) {
      matrix = window.WebKitCSSMatrix ? new WebKitCSSMatrix(getMatrix.webkitTransform).m42 : new MSCSSMatrix(getMatrix.transform).m42;
  } else {
             //Mozilla hack
      var transForm = getMatrix.MozTransform;
      var t = getMozTransformProp(transForm);
      matrix = t.f;
  }
  var sticky= function () {
      var w = $(document).scrollTop(), winht = screen.availHeight, ftPos = $('footer').offset().top, fHt = flot.innerHeight(true);
      offset = (matrix + $(document).scrollTop()) - _top;
      if (w < (ftPos-fHt) && w > _top) {
          $(flot).css({ '-webkit-transform': 'translateY(' + offset + 'px)', '-moz-transform': 'translateY(' + offset + 'px)', 'transform': 'translateY(' + offset + 'px)' });
      }
      if (w < _top) {
          $(flot).css({ '-webkit-transform': 'translateY(0px)', '-moz-transform': 'translateY(0px)', 'transform': 'translateY(0px)' });
      }
  }
  window.addEventListener('scroll', function () {sticky();}, false);

  sticky();

DEMO
Download Github

The original source for this post can be found here.