ДИВ процент высота не работает по назначению - внутри фиксированного DIV

Question

вопрос: http://jsfiddle.net/um2b98we/5/

У меня есть небольшая проблема. Я пытаюсь создать навигацию, где дочерний (синий ящик) div составляет 75% высоты экрана. У меня нет проблем вообще, пока родитель (зеленый ящик) находится в относительном положении.

Однако, когда я прокручиваю вниз, я хочу, чтобы родительский элемент был установлен поверх экрана. Однако тогда ребенок изменяет высоту до 75% от родителей, но мне нужно, чтобы сохранить время высоты экрана

для образца кода 75%, перейдите по ссылке выше:

#scroll, #header, #one, #two {width: 100%} 
#scroll {height: 2000px;} 
#one { 
    background: red; 
    height:50px; 
} 
#two { 
    background: green; 
    height:50px; 
} 
#two.fixed{ 
    position:fixed; 
    top:0; 
} 
#sub { 
    position: absolute; 
    height: 75%; 
    width: 80%; 
    background: blue; 
    margin-top:50px; 
} 

<div id="scroll"> 
    <div id="header"> 
     <div id="one"></div> 
     <div id="two"> 
      <div id="sub"></div>  
     </div> 
    </div> 
</div> 

я был пытаясь исправить его в течение длительного времени без какого-либо успеха. Я был бы признателен за помощь.

Answer 1

Вы могли бы дать высоту DIV с JavaScript:

$(window).bind('scroll', function(){ 
    var windowHeight = $(window).height(); 
    $('#two').toggleClass('fixed',$(window).scrollTop() > 50); 
    $('#sub').css('height',windowHeight *.75); 
}); 

или добавить его после того, как вы применили фиксированный класс к нему:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(), 
    windowHeight = $(window).height(); 

    if (scroll >= 50) { 
     $("#two").addClass("fixed"); 
     $('#sub').css('height', windowHeight *.75); 
    } else { 
     $("#two").removeClass("fixed"); 
    } 
});