WayPoint Sticky Bound

by HYEONGJINKIM

HTML

<script src="//cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.js"></script>
<body>
  <header></header>
  <div id="stick">
    <div id="element"></div>
  </div>
  <div id="content"></div>
</body>

CSS

#stick {
  position: relative;
  background: gray;
}

#element {
  height: 200px;
  width: 200px;
  background: red;
  margin: auto;
}

.stuck #element {
  position: fixed;
  left: 50%;
  bottom: 250px;
  margin-left: -100px;
}

.bottom #element {
  position: absolute;
  bottom: 250px;
  left: 50%;
  margin-left: -100px;
}

#content {
  height: 1000px;
  background: green;
}

header {
  height: 300px;
  background: blue;
}

JavaScript

// Generated by CoffeeScript 1.6.2
/*
Sticky Elements Shortcut for jQuery Waypoints - v2.0.3
Copyright (c) 2011-2013 Caleb Troughton
Dual licensed under the MIT license and GPL license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
*/
(function() {
  (function(t, n) {
    if (typeof define === "function" && define.amd) {
      return define(["jquery", "waypoints"], n)
    } else {
      return n(t.jQuery)
    }
  })(this, function(t) {
    var n, s;
    n = {
      wrapper: '<div class="sticky-wrapper" />',
      stuckClass: "stuck"
    };
    s = function(t, n) {
      t.wrap(n.wrapper);
      return t.parent()
    };
    t.waypoints("extendFn", "sticky", function(e) {
      var i, r, a;
      r = t.extend({}, t.fn.waypoint.defaults, n, e);
      i = s(this, r);
      a = r.handler;
      r.handler = function(n) {
        var s, e;
        s = t(this).children(":first");
        e = n === "down" || n === "right";
        s.toggleClass(r.stuckClass, e);
        i.height(e ? s.outerHeight() : "");
        if (a != null) {
          return a.call(this, n)
        }
      };
      i.waypoint(r);
      return this.data("stuckClass", r.stuckClass)
    });
    return t.waypoints("extendFn", "unsticky", function() {
      this.parent().waypoint("destroy");
      this.unwrap();
      return this.removeClass(this.data("stuckClass"))
    })
  })
}).call(this);

$(document).ready(function() {
  height = 1000 + Math.floor(Math.random() * 3000);

  $('#stick').height(height);
  $('#stick').waypoint('sticky', {
    offset: 250 // Apply "stuck" when element 30px from top
  });

  $('#stick').waypoint(function(direction) {
    if (direction == 'down') {
      $(this).removeClass('stuck').addClass('bottom');
    } else {
      $(this).removeClass('bottom').addClass('stuck');
    }
  }, {
    offset: 'bottom-in-view'
  });

});