CSS position de l'élément “fixe” à l'intérieur de défilement conteneur
je me demande si quelqu'un a trouvé une solution pour cela?
je suis à la recherche d'une solution pour fixer un élément vers le haut d'un défilement conteneur
HTML:
<div class="container">
<div class="header">title</div>
<div class="element">......</div>
... (about 10-20 elements) ...
<div class="element">......</div>
</div>tous les "éléments" ont position:relative,
le conteneur a le code CSS suivant:
.container {
position:relative;
width:200px;
height:400px;
overflow-y:scroll;
}je veux l'en-tête de rester sur le dessus du conteneur, indépendamment de sa position de défilement et les éléments de défilement en dessous.
le CSS jusqu'à présent:
.header {
position:absolute; /* scrolling out of view :-( */
z-index:2;
background-color:#fff;
}
.element{
position: relative;
}tous les éléments sont des éléments de bloc, et je ne peux pas bouger la tête à l'extérieur du conteneur.
jquery n'est pas une option à ce stade.
- Vous pouvez le faire avec jquery. ruturaj.net/automatic-header-stick-to-scroll-with-jquery
- Si le conteneur n'était pas en position relative, l'en-tête serait au-dessus de lui quand en position absolue. Votre en-tête être précédée d'une soeur du conteneur (bon, le "conteneur" devrait maintenant être "contenu" ou qqch comme ça) ou de vos éléments ont leur propre conteneur et pas de
position: relativesur le conteneur? - position: fixe ne respecte pas position: relative. Il est fixé realtively le document à tout moment.
- Il n'y a pas besoin de
fixedsi j'ai bien compris OP correctement maisabsolute - jQuery n'est pas une option ... et comme l'a dit avant, il n'y a aucune chance de changer la structure. position:fixe est fixé à la fenêtre, où les position:absolute signifie que l'en-tête de défilement de la vue, si le contenu est plus long que les conteneurs de hauteur.
- ce dont j'ai besoin, c'est que l'en-tête de séjours (visible) sur le dessus du conteneur, peu importe si le contenu est 900px de haut et de défiler tout le chemin vers le bas. au moment où il défile avec le reste du contenu et est hors de vue, si le conteneur défile vers le bas.
Vous devez vous connecter pour publier un commentaire.
Je pense que votre solution passe avec
position:sticky. Il semble qu'il est commeposition:fixedmais qui respecte la position relative par rapport à son parent.Malheureusement, c'est une fonctionnalité expérimentale, et est supporté seulement dans le Chrome. Vous pouvez voir plus de détails dans cette page de test.
La pure css solution qui vient à l'esprit est avec un peu de changement de l'annotation. Vous pouvez définir un conteneur uniquement pour les "éléments" comme ceci:
Et donner le dépassement de ce récipient intérieur. Maintenant, votre en-tête des bâtons de haut.
Voici un travail de démonstration.
jQuery UI ajouté un position() méthode utilitaire, à cet effet, qui permettrait de rendre votre vie plus facile.
M'a vraiment aidé.
La solution dans ce cas serait de pop le titre de l'extérieur de la vitesse de défilement de l'élément:
Bien que vous devriez probablement avoir une meilleure sémantique des éléments si possible (juste deviner ici):
La meilleure réponse que vous trouverez jamais pour une telle solution est à partir de ce lien Comment fixe de défilement div après certaine hauteur et d'arrêter après les autres div?
J'espère que cela sauve quelqu'un un googler temps
JS:
CSS:
HTML: