jQuery(function ($) { $.fn.stickyBox = function (options) { var element = $(this); if (!element.length) { return; } var defaults = { class: 'floating_container', content_class: 'floating_content', inverted: true, top: 0 } options = $.extend(defaults, options); var container = $(this).wrapInner('
'); var container_content = container.children('div.' + options.content_class); var view = $(window); var view_height = view.height(); var floating_container = $(''); var resize = false; if (!options.inverted) { floating_container.css({ top: options.top + 'px' }); } floating_container.insertBefore(container); var container_height = container.height(); var container_offset = container.offset().top; function scroll() { if (resize) { view_height = view.height(); resize = false; } container_offset = container.offset().top; var scroll = options.inverted ? view.scrollTop() + view.height() < container_offset + container_height : view.scrollTop() + options.top > container_offset; if (scroll) { if (!container.hasClass('fixed')) { container.addClass('fixed'); var fillup = $(''); fillup.css({ height: container_height }); floating_container.append(container_content); floating_container.show(); container.html(fillup); } } else if (container.hasClass('fixed')) { var floating_content = floating_container.children('.' + options.content_class); container.removeClass('fixed'); container.html(''); container.append(container_content); floating_container.hide(); } } view.resize(function () { resize = true; }); setInterval(scroll, 60); } });