Affixed header

affix-it.js

/* jQuery throttle https://github.com/cowboy/jquery-throttle-debounce */
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

;
(function ($) {
    var $window
    
    $(function () {
        $window = window.$window || $(window)
    })

    var methods = {
        init: function () {

            return $(this).each(function () {
                var $affix = $(this),
                    $placeholder = $affix.data('$placeholder'),
                    offsetInitial = $affix.offset(),
                    offsetTopInitial = Math.abs($('html').position().top),
                    offsetLeftInitial = offsetInitial.left,
                    affixLeftScrolled = false

                var onScroll = function () {
                    var scrollTop = $window.scrollTop(),
                        scrollLeft = $window.scrollLeft(),
                        isAffixed = $affix.data('affixed')

                    offsetTopInitial = isNaN(offsetTopInitial) ? 0 : offsetTopInitial
                    scrollTop += offsetTopInitial

                    var placeholderOffsetTop = isAffixed ? ($placeholder instanceof jQuery ? $placeholder.offset().top : $affix.offset().top) : $affix.offset().top

                    if (!isAffixed && placeholderOffsetTop <= scrollTop) {
                        $affix
                            .data('affixed', true)
                            .addClass('affixed')
                            .css({top: offsetTopInitial, left: offsetLeftInitial})

                        if (!$placeholder) {
                            var placeholder_class = $affix.data('affixPalaceholderClass') || 'affix-placeholder'
                            $placeholder = $('<div />', {'class': placeholder_class}).height($affix.outerHeight(true)).show()
                            $affix.data('$placeholder', $placeholder)
                            $affix.after($placeholder)
                            $window.on('resize', $.throttle(200, function () {
                                $placeholder.height($affix.outerHeight(true))
                            }))
                        }
                        else {
                            $placeholder.show()
                        }
                    }
                    else if (isAffixed && placeholderOffsetTop - 1 > scrollTop) {
                        $affix
                            .data('affixed', false)
                            .removeClass('affixed')

                        if ($placeholder instanceof jQuery) {
                            $placeholder.hide()
                        }
                    }

                    if ((scrollLeft || affixLeftScrolled) && isAffixed) {
                        $affix.css({left: -scrollLeft - offsetLeftInitial})
                        affixLeftScrolled = !!scrollLeft
                    }
                }

                var onScrollThrottle = $.throttle(1000 / 60, onScroll)

                $window.on('scroll load resize', onScrollThrottle)
            })

        },
        refresh: function (animation_duration, heightIncrement) {
            animation_duration = animation_duration || 0
            heightIncrement = +heightIncrement || 0

            return $(this).each(function () {

                var $affix = $(this),
                    $placeholder = $affix.data('$placeholder')

                if (!($placeholder instanceof jQuery)) {
                    return;
                }

                var affixHeight = $affix.outerHeight(true),
                    placeholderHeight = affixHeight + (isNaN(heightIncrement) ? 0 : heightIncrement)

                if (animation_duration) {
                    $placeholder.animate({height: placeholderHeight}, animation_duration)
                }
                else {
                    $placeholder.height(placeholderHeight)
                }

            })
        }
    }

    $.fn.affixIt = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.');
        }
    };
})(jQuery);

common.js

jQuery(function ($) {
    $('.header').affixIt()
})

content.html

<div class="header" data-affix-palaceholder-class="header-placeholder">
    Header content
</div>

header.less

.header.affixed {
    position: fixed;
    z-index: 500;
    top: 0;
    width: 100%;
    min-width: @bodyMinWidth;
}