2014-10-29 2 views
0

Прокрутите вниз мою скрипку. У меня есть лишнее свободное пространство внизу, которое я не знаю, как удалить. Если я прокручу вниз, нажав NEXT, макет будет прекрасен. Любая помощь, пожалуйста, высоко ценитсяJQuery расчет высоты divs

http://jsfiddle.net/cs1aobuk/

ЯШ:

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) + '%' 
     }); 

    } 
} 

ответ

2

, добавляется белое пространство в нижней части причина в том, что вы настраиваете высоту прокрутки-одушевленные и прокручивать-animate- main к вашей вычисленной переменной heightDocument, которая содержит высоту окна просмотра (ровно высоту пробела) и все 5 блоков контента. Если вы удалите windowHeight (как показано ниже), ваша проблема должна быть исправлена.

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

Вот ссылка на обновленной Fiddle: http://jsfiddle.net/cs1aobuk/1/

+0

nice work dude! Я злился !!!! – user3699998

+0

Рад, что это сработало для вас! :) – Jerome

0

Удалить windowHeight из расчета

До:

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

После:

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

DEMO

Смежные вопросы