1

Fala pessoal.

Estou com o seguinte problema, tenho um código que identifica quando ocorreu um scroll da página para poder subir o meu menu lateral ao ser realizado um scroll. Funciona no IE e no FireFox porém não funciona no Chrome.

Segue o exemplo de código.

<script type="text/javascript">
    $(document).ready(function () {

        var $body = $('body');
        var $pagiSidebar = $('.page-sidebar');

        $body.scroll(function (event) {

            console.log('scrolled $(body).scrollTop() = ' + $('body').scrollTop());

            console.log('scrolled $(document).scrollTop() = ' + $(document).scrollTop());

            console.log('scrolled $(window).scrollTop() = ' + $(window).scrollTop());

            console.log('scrolled $(html).scrollTop() = ' + $('html').scrollTop());

            console.log('scrolled $(html, body).scrollTop() = ' + $('html, body').scrollTop());

            console.log('scrolled $(html, body, document).scrollTop() = ' + $('html, body, document').scrollTop());

            if ($body.scrollTop() > 47) {
                $pagiSidebar.addClass('top-zero');
            }
            else {
                $pagiSidebar.removeClass('top-zero');
            }

        });
    });
</script>

Com isso obtive os seguintes resultados.

Firefox e IE = 

scrolled $(body).scrollTop() = 270 
scrolled $(document).scrollTop() = 0 
scrolled $(window).scrollTop() = 0
scrolled $('html').scrollTop() = 0 
scrolled $('html, body').scrollTop() = 0 
scrolled $('html, body', document).scrollTop() = 0


Chrome = 

scrolled $(body).scrollTop() = 0
scrolled $(document).scrollTop() = 0 
scrolled $(window).scrollTop() = 0
scrolled $('html').scrollTop() = 0 
scrolled $('html, body').scrollTop() = 0 
scrolled $('html, body', document).scrollTop() = 0

Alguém sabe o porque disso ou se existe outra maneira de conseguir esse mesmo resultado sem usar o scrollTop ?

Solução

Galera, após explorar um pouco mais e analisar as sugestões cheguei na seguinte solução.

<script type="text/javascript">
    $(document).ready(function () {

        var $body = $('body');
        var $pageSidebar = $('.page-sidebar');
        var $pageContainer = $('.page-container');

        $body.scroll(function (event) {

            if ($pageContainer.offset().top > 0) {
                $pageSidebar.css("top", $pageContainer.offset().top + "px");
            } else {
                $pageSidebar.css("top", "0px");
            }
        });
    });
</script>

Desisti do uso do scrollTop() pois estava apresentando um comportamento muito instável o que não é bom para aplicação.

Valeu a todos!

4
  • 1
    tente utilizando a propriedade nativa window.scrollY, além disso o correto é atribuir o evento scroll ao elemento window 23/10/2015 às 17:55
  • @Sanção a propriedade window.scrollY também fica retornando 0. 23/10/2015 às 18:04
  • 2
    Veja se aqui te ajuda. pt.stackoverflow.com/questions/47462/…
    – Marconi
    23/10/2015 às 18:26
  • Valeu galera. Com base nas sugestões e respostas cheguei a uma solução possível que coloquei no corpo da pergunta para ajudar outras pessoas. 23/10/2015 às 19:05

1 Resposta 1

0

Galera, após explorar um pouco mais e analisar as sugestões cheguei na seguinte solução.

<script type="text/javascript">
    $(document).ready(function () {

        var $body = $('body');
        var $pageSidebar = $('.page-sidebar');
        var $pageContainer = $('.page-container');

        $body.scroll(function (event) {

            if ($pageContainer.offset().top > 0) {
                $pageSidebar.css("top", $pageContainer.offset().top + "px");
            } else {
                $pageSidebar.css("top", "0px");
            }
        });
    });
</script>

Desisti do uso do scrollTop() pois estava apresentando um comportamento muito instável o que não é bom para aplicação.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .