Prévenir la visibilité du contenu sous une barre de navigation transparente et fixe

J'ai une barre de navigation semi-transparente qui a une position fixe en haut de la fenêtre et un contenu en dessous.

J'aimerais que le #content ne soit jamais visible sous la barre de navigation. Définir la marge supérieure du contenu à la même hauteur que la barre de navigation, lorsque l'utilisateur est en haut de la page. Cependant, lorsque l'utilisateur se déplace vers le bas, le contenu devient visible sous la barre de navigation.

Essentiellement, j'essaie de pousser / copier le haut du div de contenu, de sorte qu'aucun de son contenu n'est visible sous la barre de navigation.

La transparence de la barre de navigation est particulièrement importante, donc simplement avoir un fond gris opaque ne fonctionnera pas pour ce dont j'ai besoin.

• Comment modifier la couleur du texte sélectionné de la zone de texte?
• Existe-t-il un moyen de modifier les paramètres d'impression du navigateur par Javascript ou CSS
• Info-bulles pour les lignes multiples avec légende cliquez sur d3.js
• Maintenir le même texte de taille de police quel que soit le zoom viewBox
• Comment puis-je obtenir des éléments à désactiver lorsque je clique sur un autre élément?

Des suggestions pour accomplir ce que j'essaie de faire?

Code:

Http://jsfiddle.net/NAMka/

HTML:

 <nav id="top"> <div style="margin: 12px;">foo</div> </nav> <div id="content"></div> 

CSS:

 #top { position: fixed; top: 0; left: 0; width: 100%; height: 60px; color: white; background: rgba(0, 0, 0, 0.7); } #content { margin-top: 60px; } 

JS:

 // This is a little cleaner than just manually repeating the p tags. for (var i = 0; i <= 20; i++) { $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>'); } 

Quelques maquettes de ce que j'essaie de faire

C'est ce que ressemblera le violon si vous vous déplacez un peu vers le bas. Notez comment le contenu est visible sous la barre de navigation.

Idéalement, j'aimerais que le contenu soit coupé, donc il n'est pas visible sous la barre de navigation.

Mettre à jour:

Même si ce n'est pas idéal, j'ai découvert un moyen quelque peu pessimiste de réaliser ce que je voulais impliquant certains paramètres JS et overflow:hidden CSS overflow:hidden . Cela semble fonctionner assez bien pour mes besoins.

Http://jsfiddle.net/NAMka/4/

HTML:

 <nav id="top"> <div style="margin: 12px;">foo</div> </nav> <div id="container"> <div id="veil"> <div id="content"></div> </div> </div> 

CSS:

 #top { position: fixed; top: 0; left: 0; width: 100%; height: 60px; color: white; background: rgba(0, 0, 0, 0.7); } #container { background: yellow; margin-top: 60px; z-index: -1; position: relative; } #veil { background: red; position: absolute; width: 100%; left: 0px; bottom: 0px; overflow: hidden; } #content { background: blue; position: absolute; left: 0px; bottom: 0px; } 

JS:

 for (var i = 0; i <= 6; i++) { $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>'); } var height = $('#content').height(); $('#container').height(height); $('#veil').height(height); $(window).scroll(function() { $('#veil').height($('#content').height() - $(window).scrollTop() ); }); 

• Fieldset-css sur l'entrée concentrée
• Répéter dynamiquement les mosaïques en fonction du navigateur de différentes tailles ou de l'écran mobile
• Rendu du composant de braise en dehors du modèle parent
• Est-il possible de créer un caractère générique pour un nom d'attribut avec un attribut de caractère générique?
• Hauteur d'une div pour correspondre à la hauteur de la fenêtre

 <nav id="top"> <div style="margin: 12px;">foo</div> </nav> <div id="bottom"></div> <div id="content"></div> 

 #top { position: fixed; top: 0; left: 0; width: 100%; height: 60px; color: white; background: rgba(0, 0, 0, 0.7); z-index: 1; } #bottom { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #fff; z-index: 0; } #content { margin-top: 60px; }