Comment réparer un en-tête de défilement

Je suis entrain de créer un en-tête qui une fois défile à une certaine quantité de pixels il fixe et qui reste en place.

Puis-je le faire en utilisant simplement le css et le html ou ai-je besoin de jquery trop?

J'ai créé une démonstration de sorte que vous pouvez comprendre. Toute aide serait super!

http://jsfiddle.net/gxRC9/4/

body{
margin:0px;
padding:0px;
}
.clear{
clear:both;
}
.container{
height:2000px;
}
.cover-photo-container{
width:700px;
height: 348px;
margin-bottom: 20px;
background-color:red;
}
.small-box{
width:163px;
height:100px;
border:1px solid blue;
float:left;
}
.sticky-header{
width:700px;
height:50px;
background:orange;
postion:fixed;
}
  • vous n'avez pas le faire sans l'aide de JS
  • Le problème avec cette approche et la suite des réponses est que vous vous retrouvez en s'appuyant sur le récipient étant rien de plus que le 2000px que vous spécifiez. Ce serait un échec dans la production, soit parce que vous devez garder le réglage. Ou vous poser les rédacteurs à ne jamais ajouter plus de contenu au-delà d'un certain nombre de mots. De toute façon cette approche n'est pas à l'échelle.
  • Quelque chose avec jquery et CSS peuvent vous aider à atteindre collant en-tête de défilement kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll