Deal with fixed position elements

[MohamedAlaa]

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);
        }
    }

[zeman]

The challenge here is not detecting if an image itself is fixed. Often images will not have a fixed style but be sitting within a containing div that is fixed on the page. This would require walking up the parent elements and checking each for fixed position elements. Currently everything is absolutely positioned over the top of the whole page but the alternative could be to insert the overlays within the existing dom right over each image to try and preserve positioning that way. It would also fix image carousels etc.

[andreyshipilov]

Would it be easier just to recalculate the overlay positions on scroll/resize?

[MohamedAlaa]

@zeman let me try tonight. the same code block can be used to check the parent position of the image element. I agree with you as well about inserting the overlays within the existing dom right over each image.