Following content

by secretgspot

HTML

<div id="container">
      
    <div class="section">
        <div id="menu" class="menu">menu1</div>
        <div class="content">white spacewhite space white space white space white space white space white space white space white space white space white space white space white space  </div>
    </div>
    
    
    <div class="section">
        <div id="menu2" class="menu">menu2</div>
        <div class="content">white spacewhite space white space white space white space white space white space white space white space white space white space white space white space  </div>
    </div>
    
</div>

CSS

#container{
    position: relative;
}

.section { 
    padding:0;
    margin: 0;
    width:100%; 
    background-color:#f1f1f1; 
    position:relative; 
}

.section .content { 
    height:369px; 
    background-color:#ddd; 
    margin-left:96px; 
    text-align:center; 
    color:#333; 
    font-size:16px; 
}

.section .menu { 
    position:absolute; 
    left:10px; 
    width:69px; 
    height:69px; 
    background: #06C; 
    text-align:center; 
    color:#fff; 
    font-size:14px; 
}

JavaScript

$(document).ready(function() {
    $('#menu').stickyfloat({
        duration:96
    });
    $('#menu2').stickyfloat({
        duration: 400
    });
});


$.fn.stickyfloat = function(options, lockBottom) {
    var $obj = this;
    var parentPaddingTop = parseInt($obj.parent().css('padding-top'));
    var startOffset = $obj.parent().offset().top;
    var opts = $.extend({
        startOffset: startOffset,
        offsetY: parentPaddingTop,
        duration: 200,
        lockBottom: true
    }, options);

    $obj.css({
        position: 'absolute'
    });

    if (opts.lockBottom) {
        var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
        if (bottomPos < 0) bottomPos = 0;
    }

    $(window).scroll(function() {
        $obj.stop();

        var pastStartOffset = $(document).scrollTop() > opts.startOffset;
        var objFartherThanTopPos = $obj.offset().top > startOffset;
        var objBiggerThanWindow = $obj.outerHeight() < $(window).height();

        if ((pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow) {
            var newpos = ($(document).scrollTop() - startOffset + opts.offsetY);
            if (newpos > bottomPos) newpos = bottomPos;
            if ($(document).scrollTop() < opts.startOffset) newpos = parentPaddingTop;

            $obj.animate({
                top: newpos
            }, opts.duration);
        }
    });
};