Wpis z mikrobloga

Kurcze, no nie mogę... Mój problem polega mniej więcej na tym:

HTML

*



CSS

#content-container {max-width:980px;}

aside {width: 30%; position: relative;}

#main-content {width:70%;}

JS

$(window).scroll(function(){

if($(window).scrollTop()>130) {

$('.logo').fadeIn();

$('aside li').css({'position' : 'fixed'});

}

else {

$('.logo').fadeOut();

$('aside li').css({'position' : 'relative'});

}

W dużym uproszczeniu. Chodzi o to, że w momencie w którym ASIDE ma position: fixed, oczywiście w życiu nie będzie się zmniejszał wraz z wielkością viewportu (okna znaczy). Zamiast tego tworzy nową wartwę i pojawia się albo nad albo pod treścią (zależnie od z-index oczywiście).

Jak mogę zrobić, żeby aside zmniejszał się procentowo razem z całym #content-container? Można by napisać to w JS, ale na pewno jest prostsza i bardziej wydajna metoda, tylko ja dziś na to za głupi jestem :/

Pomożecie?:)

#webdev #css #responsive #html
  • 4
@npsr: Jeżeli w li masz pozycję relatywną to szerokość odnosi się do rodzica więc 100% będzie oznaczać całą szerokość rodzica, w fixed szerokość odnosi się do całego okna, więc przy zmianie pozycji na fixed zmień też width na 30% i będzie hulać.