CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pjldesign
pjldesign

Reputation: 397

jquery document scroll not firing

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.

Upvotes: 0

Views: 430

Answers (1)

luiscrjr
luiscrjr

Reputation: 7278

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

Upvotes: 2

Related Questions