with - w3schools javascript window




Como detectar a posição de rolagem da página usando jQuery (5)

Estou tendo problemas com a funcionalidade do jQuery no meu site. O que ele faz é que ele usa a função window.scroll() para reconhecer quando as janelas mudam sua posição de rolagem e quando a mudança chama algumas funções para carregar dados do servidor.

O problema é que a função .scroll() é chamada assim que há uma pequena mudança na posição de rolagem e carrega os dados na parte inferior; no entanto, o que desejo alcançar é carregar novos dados quando a posição de rolagem / página chegar na parte inferior, como acontece com o feed do Facebook.

Mas não tenho certeza de como detectar a posição de rolagem usando jQuery?

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

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

Agora isso funciona para mim ...

$(document).ready(function(){

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

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

})

funciona bem ... e então você pode usar o JQuery / TweenMax para rastrear elementos e controlá-los.


Armazene o valor da rolagem como alterações no HiddenField quando em volta do PostBack recuperar o valor e adicionar a rolagem.

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

Você está procurando a função window.scrollTop() .

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

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

Você pode adicionar todas as páginas com 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;
}

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

Essa é outra maneira de obter o valor de rolagem.







scroll