Minified - Sticky Scroll

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified.js"></script>
<div id="container">
    <div id="long"></div>
    <div id="sticky">Sticky</div>
</div>

CSS

body { font-family: sans-serif; }
div { padding: 2px; color: #ddd; text-align: center; }

#container { position: relative; }
#long { width: 100px; background-color: red; }
#sticky { position: absolute; top: 100px; left: 150px; width: 100px; height: 100px; background-color: green; }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, _ = MINI._;

$(function() {
    $('#long').ht('Scrolling... {{#for(var i = 1; i < 200; i++){}}foo bar {{i}} {{#} }}');
    
    var sticky = $('#sticky');
    var sOff = sticky.offset(); 
    var sOrig = sticky.get(['$position', '$top', '$left']);
    $(window).on('scroll', function() {
        if (sOff.y < $(window).get('$$scrollY', true))
            sticky.set({$position: 'fixed', $top: 0, $left: sOff.x + 'px'});
        else
            sticky.set(sOrig);
  });
});