CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
DDfrontenderLover
DDfrontenderLover

Reputation: 480

Jquery height calculation of divs

Please scroll down on my fiddle. I have an extra white space at the bottom that I don't know how to remove. If I scroll down by clicking NEXT, the layout is fine. Any help please much appreciated

http://jsfiddle.net/cs1aobuk/

jS:

var lines = function () {
    $('div.section').css('height', $(window).height() + 'px');
}
lines();

$(window).resize(function () {
    lines();
    heightsCalculator();
});
heightsCalculator();

function heightsCalculator() {

    var windowHeight = ($(window).height()),
        heightDocument = (windowHeight) + ($('#one').height()) + ($('#two').height()) + ($('#three').height()) + ($('#four').height()) + ($('#five').height());

    $('#scroll-animate, #scroll-animate-main').css({
        'height': heightDocument + 'px'
    });

    window.onscroll = function () {
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top': '-' + scroll + 'px'
        });

        $('#one').css({
            'background-position-y': 0 - (scroll * 100 / heightDocument) + '%'
        });

    }
}

Upvotes: 0

Views: 58

Answers (2)

kei
kei

Reputation: 20521

Remove windowHeight from the calculation

Before:

heightDocument = 
      (windowHeight) + ($('#one').height()) + 
       ($('#two').height()) + ($('#three').height()) + 
       ($('#four').height()) + ($('#five').height());

After:

heightDocument = 
      ($('#one').height()) + ($('#two').height()) + 
      ($('#three').height()) + ($('#four').height()) + 
      ($('#five').height();

DEMO

Upvotes: 0

Jerome
Jerome

Reputation: 291

The reason there is added white space at the bottom is because you are setting the height of scroll-animate and scroll-animate-main to your calculated heightDocument variable, which contains the height of the viewport (exactly the height of the white space) and all 5 content blocks. If you remove windowHeight (as seen below), your problem should be fixed.

$('#scroll-animate, #scroll-animate-main').css({
    'height': (heightDocument - windowHeight) + 'px'
});

Here's a link to your updated Fiddle: http://jsfiddle.net/cs1aobuk/1/

Upvotes: 2

Related Questions