Deal with fixed position elements

Preview

couldn't find a handy fixed position image so i tested it on bootstrap fixed navbar: http://getbootstrap.com/examples/navbar-fixed-top/

Solution

Paste the following code in the console.

    var $el = document.querySelectorAll('.navbar-fixed-top');
    var template = '<div class="perfmap" data-ms="1808" style="position: absolute; box-sizing: border-box; color: rgb(255, 255, 255); padding-left: 10px; padding-right: 10px; line-height: 14px; font-size: 26px; font-weight: 800; font-family: Helvetica Neue, sans-serif; text-align: center; opacity: 0.95; top: 0; left: 0; width: 100%; height: 100%; padding-top: 25%; z-index: 4000; background: rgb(215, 48, 39);">1808ms (12ms)</div>';

    function elementIsFixed(element) {
        var $element = $(element);
        var isFixed = false;

        if ($element.css("position") == "fixed") {
            isFixed = true;
        }

        return isFixed;
    }

    for (var i = 0; i < $el.length; i++) {
        var $elIsFixed = elementIsFixed($el[i]);
        if ($elIsFixed == true) {
            var eleHeight = $($el[i]).outerHeight();
            var paddTop = (eleHeight - 14) / 2;

            template = $(template).css({
                "position": "fixed",
                    "height": eleHeight,
                    "padding-top": paddTop
            });
            $($el[i]).before(template);
        }
    }