fixedScroll plugin

by bgmort

HTML

<div id="overlay"></div>
<div id="popup">I am a popup! Try resizing the results window so it's smaller than the popup, then scroll around.</div>

<div id="filler">
Irure sint brisket hamburger, exercitation sed commodo tail. Ad cillum sunt chicken corned beef. Pork loin brisket fatback sint, consequat ut chuck jowl kielbasa quis. Mollit rump minim tempor. Est aute exercitation, cupidatat irure hamburger t-bone turducken consequat ut pork belly speck veniam.

Chicken shank ea filet mignon, sirloin magna bresaola proident dolore eu ribeye consectetur tongue tri-tip. Meatloaf in fatback, sausage jowl duis tongue qui nostrud nulla irure ut ad cupidatat turducken. Shankle tenderloin tail, strip steak nostrud consectetur occaecat shoulder officia. Occaecat meatloaf duis, laborum reprehenderit sed nostrud cow consectetur short ribs ribeye hamburger biltong pig elit. Reprehenderit adipisicing anim brisket bresaola. Andouille chuck ea ribeye turducken biltong.

Shoulder labore nulla, et biltong non sed pastrami fugiat elit sint corned beef anim meatloaf aute. Enim proident adipisicing, culpa andouille nisi ut capicola bresaola dolore occaecat pariatur speck nulla. Sint boudin hamburger, leberkas ham hock pork in. In sirloin tail dolore t-bone, jerky est flank corned beef aliqua sint eu consequat. Tempor aute sunt, magna elit boudin pork belly ground round ex ea spare ribs.

Velit dolore magna excepteur, shank turducken incididunt beef ribs corned beef et turkey non. Do id reprehenderit jowl irure, laborum excepteur sirloin rump nulla cillum esse consectetur beef ribs. Enim officia hamburger, non adipisicing aliquip kielbasa do veniam beef tail. Pancetta ad leberkas culpa, occaecat jerky officia turducken ribeye consequat biltong frankfurter brisket bacon aute. Short ribs prosciutto voluptate kielbasa sausage, rump beef id.

Pastrami jowl cillum, commodo ribeye exercitation fugiat chuck pork chop. Pork dolore laboris fatback sint. Exercitation pancetta cow bacon sausage...

CSS

#popup {
    width: 400px;
    height: 400px;
    position: fixed;
    background: #ffcccc;
    top: 150px;
    right: 100px;
}
#overlay{
    width:100%;
    height:100%;
    position: fixed;
    background:rgba(0,0,0,.7);
}
#filler { width: 800px; }

JavaScript

(function(){
    /**
     * ensure that a fixed element (such as a popup) can be viewed completely by allowing it
     * to scroll when part of the element is outside the viewport
     * 
     * assumes you are fixing a single element
     */

    $.fn.fixedScroll = function(options){
        var settings = $.extend({
            'padding'   : 5,  //minumum padding around element when scrolling
            'context'   : ''  //event context, so the event may be removed
        }, options);
        
        var popup = this, $window = $(window), oldWindowTop = 0, oldWindowLeft = 0, padding = settings.padding;
        var context = (settings.context && settings.context.indexOf('.')) ? '.' + settings.context : settings.context; 
        
        $window.bind('scroll' + context, function(e){
            //get the delta
            var windowTop = $window.scrollTop(), windowLeft = $window.scrollLeft();
            var deltaY = windowTop - oldWindowTop, deltaX = windowLeft - oldWindowLeft;
            oldWindowTop = windowTop; oldWindowLeft = windowLeft;
            
            if (deltaY > 0){ //scrolling down
                //if the bottom's off the screen, let it scroll
                if (popup.offset().top + popup.height() + padding > $window.scrollTop() + $window.height()){
                    unFix();
                }
                else{
                    fix();
                }
            }
            else if (deltaY < 0){//scrolling up
                //if the top's off the screen, let it scroll
                if (popup.offset().top < $window.scrollTop() + padding){
                    unFix();
                }
                else{
                    fix();
                }
            }
            else if (deltaX > 0){ //scrolling right
                //if the right side is off the screen, let it scroll
                if (popup.offset().left + popup.width() + padding > $window.scrollLeft() + $window.width()){
                    unFix();
    ...