CODEWITHSUNDEEP
jquery
Joe Isaacson
Joe Isaacson

Reputation: 4132

How is scroll height larger than window height?

I am trying to make a function stop running before the user scrolls the entire window height, but what I am seeing in the console isn't adding up. Somehow, the scrollHeight (which is the scrollTop value) ends up being more than the window heigh itself. How is this possible?

$(document).ready(function() {

    var windowHeight = $(window).height();

    if( $(window).width() > 720  && $(window).scrollTop() < (windowHeight-400) ) {

                $(window).bind('scroll', function(){

                var scrollHeight = $(window).scrollTop();
                console.log('scroll height', scrollHeight)
                console.log('window height', windowHeight)

                function parallaxScroll(){
                   $('#main').css('top',(500-(scrollHeight*2))+'px');
                };

                    parallaxScroll();
                });
    }
});

Upvotes: 0

Views: 2428

Answers (1)

Fraggy
Fraggy

Reputation: 579

Looking at the documentation from jQuery, you are getting the height of the viewport, meaning that you are only getting what's in view. You need to set the height to the document height like so: 

$(document).ready(function() {

    var windowHeight = $(document).height();

    if( $(window).width() > 720  && $(window).scrollTop() < (windowHeight-400) ) {

                $(window).bind('scroll', function(){

                var scrollHeight = $(window).scrollTop();
                console.log('scroll height', scrollHeight)
                console.log('window height', windowHeight)

                function parallaxScroll(){
                   $('#main').css('top',(500-(scrollHeight*2))+'px');
                };

                    parallaxScroll();
                });
    }
});

Upvotes: 2

Related Questions