Get position of an element

Navigation
0

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 scrolling the scroll, I would like to get the current position of the div "content 3"

I tried to get clicked on some other div and nothing, scrolling the scroll just like it would do and nothing at all. 

var a = $('#dv2').scrollTop();
alert(a);
    
asked by anonymous 26.10.2017 / 19:13

2 answers

1

To get the position of an element relative to the top of the window, you need to do the following:

  

Distance from element to top of document - Rolled distance from   page 

$(window).on("scroll", function(){
    console.log($("#dv3").offset().top - $(window).scrollTop());
});
    
26.10.2017 / 20:01
0

You can look up the coordinates of the element relative to window current ... the function below returns the "coordinates" in pixels where x represents the horizontal line (based on the measures of left) 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>
    
26.10.2017 / 19:52
Straight brackets (brackets) wrong? Error: There are no primary or candidate keys in the referenced table