Page scroll, page variables

console.log("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);

console.log("Doc -> W: " + $( document ).width() + " H: " + $( document ).height() + " Wind -> W: " + $( window ).width() + " H: " + $( window ).height());

Element position relative to parent element

var x = $('#element').position();
console.log("Top: " + x.top + " Left: " + x.left);

Element position relative to document

var x = $( '#element' ).offset();
console.log("X: " + x.left + ", Y: " + x.top);


        var qb = $('.myElement');
        // element ID
        var qbId = qb.attr('id');
        if (qbId) {
            var cssMarginTop = parseInt(qb.css('margin-top'));
            cssMarginTop = cssMarginTop ? cssMarginTop : 0;
            var documentHeight = $( document ).height();
            // get its distance from document top margin
            x = qb.offset();
            var marginFromWindow = x.top;

            $(window).scroll(function(){

                var object = document.getElementById(qbId);
                rectObject = object.getBoundingClientRect();

                var marginFromViewport = rectObject.top;
                // the block has a margin top of 30px used to move the image outside the block with a negative margin of -30px
                // we need to get this margin and use it in out measurements
                marginFromViewport = marginFromViewport - cssMarginTop;

                console.log(marginFromViewport);

                //if (marginFromViewport - cssMarginTop < 0) {
                var currentCssMargin = parseInt(qb.css('margin-top'));
                currentCssMargin = currentCssMargin ? currentCssMargin : 0;

                if (marginFromViewport < 0) {
                    var newDocumentHeight = $( document ).height();
                    // if the block lowered too much and it is expanding the document windos we stop the process
                    if (newDocumentHeight <= documentHeight) {
                        // block is not (entirely) visible anymore
                        var deplacement = Math.abs(marginFromViewport);
                        deplacement = deplacement + currentCssMargin;
                        qb.css('margin-top', deplacement + 'px');
                    }
                }
                else {

                    if (marginFromViewport > 0) {
                        var newMargin = currentCssMargin - marginFromViewport;
                        console.log(newMargin);
                        if (newMargin > cssMarginTop) {
                            qb.css('margin-top', newMargin + 'px');
                        }
                    }
                }
            });
        }