Problem with jQuery scrollTop () in chrome

1

Personal speech.

I have the following problem, I have a code that identifies when a page scroll occurred to be able to raise my side menu when a scroll is performed. It works in IE and FireFox but does not work in Chrome.

Follow the code example.

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

With this I got the following results.

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

Does anyone know why or is there any other way to get this same result without using scrollTop?

Solution

Galera, after exploring a bit more and analyzing the suggestions I came up with the following solution.

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

I gave up using scrollTop () because it was showing very unstable behavior which is not good for application.

Thanks everyone!

    
asked by anonymous 23.10.2015 / 19:44

1 answer

0

Galera, after exploring a bit more and analyzing the suggestions I came up with the following solution.

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

I gave up using scrollTop () because it was showing very unstable behavior which is not good for application.

    
09.09.2016 / 16:28