jquery document scroll not firing

Question

I have a fixed navbar on my site that I'm trying to tie functions to once it reaches a certain point on the page. I've done this successfully three times before on three sites but can't for the life of me get it to work on this one. The function is wrapped in a window ready so I know the page is fully loaded -- completely stumped for two days... Here the code:

jQuery:

function startchange() {
$('#ajax-frame').imagesLoaded().done(function(instance) {
    var scroll_start = 0;
    var startchange = $('.startchange');
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).on( 'scroll', function() {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $('nav').addClass('active');
                console.log("startchange working");
            } else {
                $('nav').removeClass('active');
            };
        });
    }
});
};

CSS:

body,
html {
height: 100% !important;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}

Thanks for any insight into this frustrating issue.

How do you fire startchange function ? Are you sure you have $('#ajax-frame').imagesLoaded().done callback called ? — Nikolay Ermakov
– Nikolay Ermakov, Commented Jan 31, 2017 at 22:01
Please post all the relevant code so that we can run a minimal example to reproduce the issue. — Scott Marcus
– Scott Marcus, Commented Jan 31, 2017 at 22:02
You're wrapping your code into a startChange function. Have you invoked it? — luiscrjr
– luiscrjr, Commented Jan 31, 2017 at 22:03
Yes it's wrapped in a window load: $(window).load(function() { ***several other functions*** setTimeout(function() { startchange(); console.log("startchange loaded!"); }, 500) }); — pjldesign
– pjldesign, Commented Jan 31, 2017 at 22:04
the imagesLoaded plugin just makes sure all the images are loaded before firing the function but it still doesn't work without it... sorry to confuse the issue — pjldesign
– pjldesign, Commented Jan 31, 2017 at 22:07

luiscrjr · Accepted Answer · 2017-01-31 22:49:25Z

2

One quick approach that will sove the issue is to remove: overflow-x: hidden; from your css. Demo: https://jsfiddle.net/mrlew/ce8me3qk/

But here is what's happening: you're setting body and html to height 100%, and one is overlapping the other (html tag is a block element too). You're setting both to height: 100% and actually what you're scrolling is body, and not window/document.

Proof: look at both scrollbar there when setting overflow to scroll: https://jsfiddle.net/mrlew/ce8me3qk/8/ Note that you're scrolling the inner one. So, if you change $("document").on('scroll', function() { to $("body").on('scroll', function() {, it will work too.

Or, just don't set html height to 100%.

edited Jan 31, 2017 at 22:49

answered Jan 31, 2017 at 22:14

luiscrjr

7,2783 gold badges28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pjldesign Over a year ago

Thanks! Had that rule set on all the other working sites so it never occurred to me.

luiscrjr Over a year ago

@pjldesign you're welcome. I edited with an explanation

Collectives™ on Stack Overflow

jquery document scroll not firing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related