0

Tenho por exemplo a seguinte estrutura

<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>

E sempre ao rolar o scroll, gostaria de obter a posição atual da div "conteudo 3"

Tentei obter ao clicar em alguma outra div e nada, ao rolar o scroll igual gostaria de fazer e nada tbm.

var a = $('#dv2').scrollTop();
alert(a);
2
  • Algo do tipo: Como colocar scroll no fim da div?
    – Marconi
    Commented 26/10/2017 às 17:17
  • @Marconi nao amigo, eu queria obter a posição dele em relação ao scroll. Por exemplo com este codigo: var div = $('#general-menu'); $(window).scroll(function () { if ($(this).scrollTop() > 35) { div.removeClass("general-menu-normal"); div.addClass("general-menu-fixed"); } else { div.removeClass("general-menu-fixed"); div.addClass("general-menu-normal"); } }); eu consigo verificar se o scroll é maior q 35 para colocar o menu fixo, nesta mesma pegada, eu queria pegar a posição da div Commented 26/10/2017 às 17:59

2 Respostas 2

3

Para pegar a posição de um elemento em relação ao topo da janela, é preciso fazer a seguinte relação:

distância do elemento até o topo do documento - distância rolada da página

$(window).on("scroll", function(){
    console.log($("#dv3").offset().top - $(window).scrollTop());
});
1
  • Nossa, isso que eu queria :D Obrigado Commented 26/10/2017 às 18:31
0

Podes buscar as coordenadas do elemento em relação a window atual... a função abaixo retorna as "coordenadas" em pixels onde x representa a linha horizontal (baseada nas medidas de left) e y a linha vertical (baseada em top).

Note que é necessário que o elemento seja {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>

2
  • Isso mesmo man, obrigado. O que seria {DOMDocumentElementNode}? Commented 26/10/2017 às 18:03
  • Falha minha, esta definição não existe. O correto seria adicionar os espaços: {DOM DocumentElement Node} ou simplesmente, um "nó" do "documento" manipulado pela API DOM. Referencias: DOM, DocumentElement, Node Commented 26/10/2017 às 18:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .