javascript - posicion - Cómo detectar la posición de desplazamiento de la página usando jQuery

scrolltop jquery

Question

Tengo problemas con la funcionalidad de jQuery en mi sitio web. Lo que hace, es que usa la función window.scroll() para reconocer cuándo la ventana cambia su posición de desplazamiento y al cambiar llamadas algunas funciones para cargar datos desde el servidor.

El problema es que la función .scroll() tan pronto como hay un pequeño cambio en la posición de desplazamiento y carga datos en la parte inferior; sin embargo, lo que deseo lograr es cargar nuevos datos cuando la posición de desplazamiento / página llega a la parte inferior, como ocurre con el feed de Facebook.

Pero no estoy seguro de cómo detectar la posición de desplazamiento usando jQuery?

function getData() {
  $.getJSON(''Get/GetData?no=1'', function (responseText) {
    //Load some data from the server
  })
};

$(window).scroll(function () {
    getData();
});

Answer 1

Ahora eso funciona para mí ...

$(document).ready(function(){

    $(window).resize(function(e){
        console.log(e);                   
    });

    $(window).scroll(function (event) {
        var sc = $(window).scrollTop();
        console.log(sc);
    });

})

funciona bien ... y luego puede usar JQuery / TweenMax para rastrear elementos y controlarlos.

Answer 2

Almacene el valor del desplazamiento como cambios en HiddenField cuando alrededor del Postback recupera el valor y agrega el desplazamiento.

//jQuery

jQuery(document).ready(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />

Answer 3

Consulte aquí DEMO http://jsfiddle.net/yeyene/Uhm2J/

function getData() {
    $.getJSON(''Get/GetData?no=1'', function (responseText) {
        //Load some data from the server
    })
};

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       // getData();
   }
});

Answer 4

Está buscando la función window.scrollTop() .

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});

Answer 5

Puede agregar todas las páginas con este código:

Código JS:

 /* Top btn */
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $(''#toTop'').fadeIn();
        } else {
            $(''#toTop'').fadeOut();
        }
    });
    var top_btn_html="<topbtn id=''toTop'' onclick=''gotoTop()''>&#8593;</topbtn>";
    $(''document'').ready(function(){
        $("body").append(top_btn_html);
    });
    function gotoTop(){
        $("html, body").animate({scrollTop: 0}, 500);    
    }
    /* Top btn */

CÓDIGO CSS

/*Scrool top btn*/
#toTop{
    position: fixed;
    z-index: 10000;
    opacity: 0.5;
    right: 5px;
    bottom: 10px;
    background-color: #ccc;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: black;
    font-size: 22px;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
}

Answer 6

Puede extraer la posición de desplazamiento usando jQuery''s .scrollTop() method

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

Answer 7

$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ '' = scroll value'');
});

Esta es otra forma de obtener el valor del desplazamiento.