Comment détecter la position de défilement de la page à l'aide de jQuery

J'ai des problèmes avec la fonctionnalité jQuery sur mon site Web. Ce qu'il fait, c'est qu'il utilise la window.scroll() fonction pour reconnaître quand la fenêtre change sa position de défilement et au changement appelle quelques fonctions pour charger les données du serveur.

Le problème est que la .scroll()fonction est appelée dès qu'il y a même un petit changement dans la position de défilement et charge les données en bas; cependant, ce que je souhaite réaliser est de charger de nouvelles données lorsque la position de défilement / page atteint le bas, comme cela se produit pour le flux Facebook.

Mais je ne sais pas comment détecter la position de défilement à l'aide de jQuery?

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

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

Vous pouvez extraire la position de défilement en utilisant la .scrollTop()méthode de jQuery

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

Vous recherchez la window.scrollTop()fonction.

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

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

Vérifiez ici 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');
});

C'est une autre façon d'obtenir la valeur du scroll.

Maintenant ça marche pour moi ...

$(document).ready(function(){

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

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

})

cela fonctionne bien ... et vous pouvez ensuite utiliser JQuery / TweenMax pour suivre les éléments et les contrôler.

Stockez la valeur du défilement en tant que modifications dans HiddenField lorsque le PostBack récupère la valeur et ajoute le défilement.

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

Vous pouvez ajouter toutes les pages avec ce code:

Code 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 */

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

Ce code pour chat_boxes pour charger les messages précédents

GET Scroll Position:

var scrolled_val = window.scrollY;

DÉTECTER la position de défilement:

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