Waypoints Basic functionality

by HYEONGJINKIM

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<div class="content">
    <div class="topper"></div>
    
        <div class="container">.container positions everything
            <!-- <div class="sticky-wrapper">is waypoint trigger -->
                <div class="waypoint">.waypoint - gets .stuck</div>
            <!-- </div>  -->               
        </div>  
    
    <div class="stophere">How can I make .waypoint park here?</div>
    
</div>

CSS

.content{ height:3000px; }
.topper{ width:100%; height:100px; border-bottom: 1px solid #D1D1D1; }

.container{ width:500px; height:90px; margin:0 auto; background-color:#3498db; }
    .waypoint{ width: 500px; height:90px; background-color:#D1D1D1; }
    .stuck{ position:fixed; top:0; }

.stophere{ width:100%; height:90px; background-color: #e74c3c; margin-top:300px; }

JavaScript

// couldnt find a cdn for this, lemme know if you know how to find it please
// Generated by CoffeeScript 1.6.2
/* couldnt find a cdn for this, lemme know if you know how to find it please
Sticky Elements Shortcut for jQuery Waypoints - v2.0.4
Copyright (c) 2011-2014 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);


$('.waypoint').waypoint('sticky', {
  wrapper: '<div class="sticky-wrapper" />',
  stuckClass: 'stuck'
});


// trigger for when top of page hits the top of .stophere (both directions)
//$('.stophere').waypoint(function(direction) {
  //console.log('hit stophere');
  //$('.waypoint').waypoint('unsticky');
//});