Get position of an element

Question

I have for example the following structure

<div style="height: 1500px;">
    <div id="dv1" style="height: 600px">
       conteudo 1
    </div>

    <div id="dv2" style="height: 300px">
       conteudo 2
    </div>

    <div id="dv3" style="height: 300px">
       conteudo 3
    </div>

    <div id="dv4" style="height: 300px">
       conteudo 4
    </div>    
</div>

And always while scrolling, I would like to get the current position of the div "content 3"

I tried to get by clicking on some other div and nothing, by scrolling the same scroll I would like to do and nothing tbm.

var a = $('#dv2').scrollTop();
alert(a);

Answer 1

To take the position of an element relative to the top of the window, you need to make the following relation:

distance from the element to the top of the document - scrolled distance from the page

$(window).on("scroll", function(){
    console.log($("#dv3").offset().top - $(window).scrollTop());
});

Answer 2

You can find the element coordinates in relation to window current... the function below returns the "coordinates" in pixels where x represents the horizontal line (based on left measures) and y the vertical line (based on top).

Note that the element must be {DOM DocumentElement Node}

        /**
         * Get element position on window
         * @param el {DOM DocumentElement Node}
         * @return {number|float} cardinal x,y relative element position
         */
         function getPosition(el){
            // default positions
            var xPos = 0,
                yPos = 0;
            // loop
            while (el) {
                if ( el.tagName === "BODY" ){
                    // deal with browser quirks with body/window/document and page scroll
                    var xScroll = el.scrollLeft || document.documentElement.scrollLeft,
                        yScroll = el.scrollTop  || document.documentElement.scrollTop;
                    xPos += ( el.offsetLeft - xScroll + el.clientLeft );
                    yPos += ( el.offsetTop  - yScroll + el.clientTop );
                } else {
                   // for all other non-BODY elements
                   xPos += ( el.offsetLeft - el.scrollLeft + el.clientLeft );
                   yPos += ( el.offsetTop  - el.scrollTop  + el.clientTop );
                }
                el = el.offsetParent;
            }
            return {
               x: xPos,
               y: yPos
            };
        };
        
        window.addEventListener('scroll', function(){
            var el = document.getElementById('dv3');
            console.log(getPosition(el));
        }, false);

<div style="height: 1500px;">
    <div id="dv1" style="height: 600px">
       conteudo 1
    </div>

    <div id="dv2" style="height: 300px">
       conteudo 2
    </div>

    <div id="dv3" style="height: 300px">
       conteudo 3
    </div>

    <div id="dv4" style="height: 300px">
       conteudo 4
    </div>    
</div>







<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>