Comment faire pour que l'élément fixe reste dans les limites visibles du parent avec CSS?

Question

Ceci est ma disposition, la partie jaune est réparée. J'ai fait un simple script pour faire rétrécir/grossir la barre latérale de sorte qu'elle ne dépasse jamais le pied vert, est-il possible d'obtenir la même chose avec CSS seulement?

voir en action ici: http://jsfiddle.net/RWxGX/203/

J'ai fait un simple script jquery de sorte que la barre latérale jaune fixe diminue lorsque la partie verte monte lors du défilement de la fenêtre

HTML, CSS , JS:

<div id="content"> 
    <div id="sidebar"> 
    <div id="sidebar-container"> 
     <div id="sidebar-wrapper"> 
     <div id="sidebar-content"> 
      height: 300px 
     </div> 
     </div> 
    </div> 
    </div> 
    <div id="article"> 
    Scroll me to see the sidebar shrink 
    </div> 
</div> 
<div id="footer"> 

</div> 

body { 
    padding: 0; 
    margin: 0; 
    min-height: 100%; 
} 
#content { 
    display: flex; 
    justify-content: stretch; 
} 

#sidebar { 
    height: inherit; 
    width: 100px; 
    flex: 0 0 auto; 
    background-color: red; 
} 

#article { 
    background-color: orange; 
    flex-grow: 1; 
    font-size: 55px; 
} 

#sidebar-container { 
    position: fixed; 
    max-height: 100%; 
    height: inherit; 
    width: inherit; 
    background-color: red; 
    display: flex; 
    flex-direction: column; 
} 

#sidebar-wrapper { 
    background-color: yellow; 
    overflow-y: scroll; 
} 

#sidebar-content { 
    background-color: rgba(255, 0, 0, 0.1); 
    height: 20000px; 
} 

#mainbar { 
    background-color: blue; 
} 

#content { 
    height: 300px; 
    width: 500px; 
    background-color: rgba(255, 255, 255, 0.75); 
} 
#footer { 
    height: 2000px; 
    width: 500px; 
    background-color: green; 
} 

$(document).ready(function() { 
    var sidebar_container = $('#sidebar-container'); 
    var sidebar_content = $('#sidebar-content'); 
    var footer = $('#footer'); 
    $(window).scroll(function() { 
    sidebar_container_height = 
     Math.max(
     Math.min(
      footer.offset().top - $(window).scrollTop(), 
      $(window).height()), 
     0); 
    sidebar_container.css('height', sidebar_container_height + 'px'); 
    sidebar_content.text('height: ' + sidebar_container_height + 'px'); 
    }) 
}) 

Answer 1

Je pense que dans certains cas, il peut être résolu en utilisant position:absolute;z-index:999 au #footer. Mais cela amène le bas de page à couvrir la barre latérale, pas à redimensionner la barre latérale.