Problem with jQuery scrollTop() on Chrome

Asked

Viewed 669 times

1

Personal talk.

I have the following problem, I have a code that identifies when a scroll of the page occurred to be able to move up my side menu when a scroll is performed. Works on IE and Firefox but doesn’t work on 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 obtained 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 if there is another way to get that same result without using scrollTop ?

Solution

Guys, after exploring a little more and analyzing the suggestions I arrived in 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 the use of scrollTop() because it was presenting a very unstable behavior which is not good for application.

Thanks to all!

javascript jquery
  • 1

    try using the native property window.scrollY, in addition the correct is to assign the event scroll to the element window

  • @Sanction on the property window.scrollY also keeps returning 0.

  • 2

    See if it helps you here. http://answall.com/questions/47462/fazer-else-em-jquery-para-controlr-scrolltop/47593#47593

  • Thanks guys. Based on the suggestions and answers I arrived at a possible solution that I put in the body of the question to help other people.

1 answer

0


Guys, after exploring a little more and analyzing the suggestions I arrived in 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 the use of scrollTop() because it was presenting a very unstable behavior which is not good for application.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.