JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div class="test"></div>

CSS

body {
    width: 10000px;
    height: 10000px;
}
.test {
    position: absolute;
    left: 1000px;
    top: 50px;
    width: 100px;
    height: 100px;
    background: red;
}

JavaScript

(function($, window, document) {
    $.fn.getBounds = function() {
        var offset = $(this).offset(),
            windowWidth = $(window).width(),
            windowHeight = $(window).height(),
            scrollLeft = $(document).scrollLeft(),
            scrollTop = $(document).scrollTop(),
            width = $(this).width(),
            height = $(this).height(),
            bottom = offset.top + height,
            right = offset.left + width;

        return {
            top: offset.top,
            left: offset.left,
            bottom: bottom,
            right: right,
            width: width,
            height: height,
            margin: {
                left: offset.left - scrollLeft,
                top: offset.top - scrollTop,
                right: windowWidth - (right - scrollLeft),
                bottom: windowHeight - (bottom - scrollTop)
            },
            window: {
                width: windowWidth,
                height: windowHeight
            }
        };
    }
})(jQuery, window, document)


$(document).scroll(function() {
    console.log($('.test').getBounds());
});