YUI Pinning Test

Using YUI scroll event and dome scroll event

HTML

<div class="header"></div>
<div class="wrapper">
<div class="sticky"  id="stickyDiv"></div>  
<div class="tallDivWrap">
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
        <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
        <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
    <div class="rightITem">
    </div>
</div>
</div>

CSS

.stickyWrap {
    position: relative;
    float: left;
    overflow: hidden;
}
.sticky {
    position: relative;
    float: left;
    padding: 1em;
    width: 200px;
    height: 300px;
    background: red;
}
.header {
    width: 100%;
    height: 200px;
    background: grey;
}
.wrapper {
    padding-top: 50px;
    position: relative;
    overflow: hidden;
}
.tallDiv {
    height: 1000px;
    width: 300px;
    background: black;
    position: relative;
    float: left;
    margin-left: .5em;
}
.rightITem {
    float: left; 
    width: 180px;
    height: 200px;
    position: relative;
    margin: .5em;
    background: black;
}
.tallDivWrap {
    position: relative;
    float: left;
    width: 400px;
}
.pinnedTop {
    position: fixed;
    top: 0;
}
.pinnedLeft {
    position: fixed;
    left: 0;
}

JavaScript

YUI().use("node","event",function(Y) {
    
    var createSticky = function(stickyId, options) {
        var sticky = {
            pinnedTo: "top",
            pinnedClass: "pinnedTop",
            parentClass: "stickyWrap"
        }; 
        if (options) {
            Y.mix(sticky, options, [overwrite=true]);
        }
            var pinTop = function(windowY, stickyY, theNode) {
                if (windowY && stickyY) {
                    if (windowY > stickyY) {
                        theNode.addClass(sticky.pinnedClass);
                    }
                    if (stickyY > windowY) {
                        if(theNode.hasClass(sticky.pinnedClass)) {
                           theNode.removeClass(sticky.pinnedClass);
                        }

                    }
                } 
            }
        sticky.node = Y.one("#" + stickyId);
        sticky.y = sticky.node.getY();
        sticky.h = sticky.node.get("offsetHeight");
        sticky.w = sticky.node.get("offsetWidth");
        sticky.parent = "<div class='" + sticky.parentClass + "' style=' height:" + sticky.h + "px; width:" + sticky.w + "px;'>";
        sticky.node.wrap(sticky.parent);
        Y.on('scroll', function(e) { 
            if (sticky.pinnedTo == "top") {
                sticky.windowH = Y.DOM.docScrollY();
                pinTop(sticky.windowH, sticky.y, sticky.node);
            }
            // code for other pin types like left or right
    });
    }
    createSticky("stickyDiv");
});