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

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

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

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

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

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

Puede extraer la posición de desplazamiento utilizando el .scrollTop()método de jQuery

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

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

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

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

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();
   }
});

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

Esta es otra forma de obtener el valor de desplazamiento.

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.

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

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

$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

Este código para chat_boxes para cargar mensajes anteriores

OBTENER Posición de desplazamiento:

var scrolled_val = window.scrollY;

DETECTAR Posición de desplazamiento:

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );