Empty space below content using Parallax scrolling

Question

I'm using Parallax scrolling for my new site but I have found there's loads of empty space after the content has been scrolled past. It scrolls past the bottom of the content and there's nothing there.

I assume this is because the script is speeding up scrolling, since when I remove the Parallax effect the content stops at the bottom of the browser window like its supposed to.

jQuery:

    $(document).ready(function() {
    /* Scroll event handler */
    $(window).bind('scroll',function(e){
        parallaxScroll();
    });
});

/* Scroll the background layers */
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#Body_Background').css('top',(0-(scrolled*.3))+'px');
    $('#Home_WelcomeMessage').css('top',(0-(scrolled*.305))+'px');
    $('#Home_ContentBox2').css('top',(0-(scrolled*.605))+'px');
    $('#Home_ContentBox3').css('top',(0-(scrolled*.995))+'px');
}

CSS:

#Body_Background { z-index: 3; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
#Body_Wrapper { position: relative; padding: 0; margin: 0; }
#Home_ContentBox1 { z-index: 5; position: relative; width: 100%; height: 950px; left: 0px; margin-top: 800px; padding: 0px; }
#Home_WelcomeMessage { z-index: 4; position: fixed; width: 100%; height: 400px; top: 0; margin-top: 400px; }
#Home_ContentBox2 { z-index: 5; position: relative; width: 100%; height: 800px; left: 0px; margin-top: 100px; padding: 0px; }
#Home_ContentBox3 { z-index: 5; position: relative; width: 100%; height: 1000px; left: 0px; margin-top: 0px;  padding: 0px; }

Any help is most appreciated :)

create some jsfiddle or codepen for us to help you about your problem. — Szymon
– Szymon, Commented Nov 6, 2013 at 16:04
You can see the site here: twobytwovideo.co.uk/new If you scroll down to the bottom it continues to scroll past the bottom of the content. — Noah Goodrich
– Noah Goodrich, Commented Nov 6, 2013 at 16:11
If I'm right because I checked it in chrome(works great) and in Firefox only got problem. Try to change $(window).scrollTop(); for $(document).scrollTop(); IE and FF got problem with that — Szymon
– Szymon, Commented Nov 6, 2013 at 16:16

Noah Goodrich · Accepted Answer · 2013-11-06 17:12:55Z

1

I managed to fix this.

For those who have the same problem in the future. I set the ContentBox1, 2 and 3 divs to absolute positioning instead of relative, and then pushed them down using margin-top to ensure they were in the correct position.

answered Nov 6, 2013 at 17:12

Noah Goodrich

3251 gold badge5 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Empty space below content using Parallax scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related