Cara mendeteksi posisi gulir halaman menggunakan jQuery

Saya mengalami masalah dengan fungsionalitas jQuery di situs web saya. Apa yang dilakukannya, adalah bahwa ia menggunakan window.scroll() fungsi untuk mengenali ketika windows mengubah posisi gulir dan pada perubahan memanggil beberapa fungsi untuk memuat data dari server.

Masalahnya adalah .scroll()fungsi dipanggil segera bahkan ada sedikit perubahan pada posisi gulir dan memuat data di bagian bawah; namun, yang ingin saya capai adalah memuat data baru ketika posisi gulir / halaman mencapai di bagian bawah, seperti yang terjadi pada umpan Facebook.

Tetapi saya tidak yakin bagaimana mendeteksi posisi gulir menggunakan jQuery?

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

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

Anda dapat mengekstraksi posisi gulir menggunakan .scrollTop()metode jQuery

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

Anda sedang mencari window.scrollTop() fungsinya.

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

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

Periksa di sini 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');
});

Ini adalah cara lain untuk mendapatkan nilai gulir.

Sekarang itu bekerja untuk saya ...

$(document).ready(function(){

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

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

})

ini bekerja dengan baik ... dan kemudian Anda dapat menggunakan JQuery / TweenMax untuk melacak elemen dan mengontrolnya.

Simpan nilai gulir sebagai perubahan di HiddenField ketika di sekitar PostBack mengambil nilai dan menambahkan gulir.

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

Anda dapat menambahkan semua halaman dengan kode ini:

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

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

Kode ini untuk chat_boxes untuk memuat pesan sebelumnya

DAPATKAN Posisi Gulir:

var scrolled_val = window.scrollY;

DETECT Posisi Gulir:

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