Sticky div

by Allen N.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec elit ante. Ut consectetur faucibus dui, ut tempus mauris ornare ut. Aliquam ultrices egestas ligula cursus pretium. Cras augue diam, semper commodo dignissim et, blandit et est. Curabitur ac molestie nulla. Nunc nec eros eget nisi adipiscing rhoncus. Phasellus vel elit quis ipsum ornare convallis. Curabitur blandit erat eu mi facilisis laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi a lacus vel mauris posuere lobortis. Nulla facilisi. Sed sit amet est neque, in vehicula velit. Integer sagittis interdum felis at varius. Aliquam tellus tellus, fermentum id eleifend mollis, porta sed enim.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec elit ante. Ut consectetur faucibus dui, ut tempus mauris ornare ut. Aliquam ultrices egestas ligula cursus pretium. Cras augue diam, semper commodo dignissim et, blandit et est. Curabitur ac molestie nulla. Nunc nec eros eget nisi adipiscing rhoncus. Phasellus vel elit quis ipsum ornare convallis. Curabitur blandit erat eu mi facilisis laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi a lacus vel mauris posuere lobortis. Nulla facilisi. Sed sit amet est neque, in vehicula velit. Integer sagittis interdum felis at varius. Aliquam tellus tellus, fermentum id eleifend mollis, porta sed enim.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec elit ante. Ut consectetur faucibus dui, ut tempus mauris ornare ut. Aliquam ultrices egestas ligula cursus pretium. Cras augue diam, semper commodo dignissim et, blandit et est. Curabitur ac molestie nulla. Nunc nec eros eget nisi adipiscing rhoncus. Phasellus vel elit quis ipsum ornare convallis. Curabitur blandit erat eu mi facilisis laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi a lacus vel...

CSS

#container {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    padding: 15px;
}

JavaScript

$(function fixedUntilPoint() {

    var container = $('#container');
    var offsetContainer = container.offset().top;
        
    function adjustDivPosition() {
    
        var offsetFloat = $(document).scrollTop() + $(window).height() - container.outerHeight();
        
        if(offsetContainer <= offsetFloat){

            container.css({
                bottom:   'auto',
                position: 'absolute',
                top:      offsetContainer
            });
        
        } else {
        
            container.css({
                bottom:   0,
                position: 'fixed',
                top:      'auto'
            });
            
        }
        
    }
    
    $(window).on('scroll resize', adjustDivPosition)
    	adjustDivPosition();

});