28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div qui suit le scroll en css pur

Bonjour,

Je cherche à faire un bloc div qui suivrait le défilement afin d'être toujours affiché à l'écran. Ma mise en page ressemble à ceci :
http://nsa33.casimages.com/img/2014/12/02/mini_141202095839199424.jpg

Il faudrait que le bloc div évolue de haut en bas dans la zone verticale en jaune (qui est elle-même un div) sans jamais en sortir pour ne pas empiéter sur l'entête et le pied-de-page.

J'ai cherché sur Google, j'ai trouvé pas mal de choses, notamment sur ce forum. C'est une question récurrente.

Seulement voila, idéalement j'aimerais faire ça en CSS pur, sans jQuery. Tant pis si l'animation est plus saccadée.

C'est gérable en CSS pur ? J'arrive à positionner un bloc en fixed à l'écran, mais pas dans un autre bloc.
Merci beaucoup !
Modifié par atoo (02 Dec 2014 - 09:57)
Bonjour atoo,

atoo a écrit :
C'est gérable en CSS pur ?
Oui, bien sûr !
atoo a écrit :
J'arrive à positionner un bloc en fixed à l'écran, mais pas dans un autre bloc.
Normal, la position fixed fixe un élément par rapport à la fenêtre.

Comme je vois les choses, je pense que ta structure en html ressemble à ceci, non ?
<HTML>
<BODY>
<HEADER>Bleu</HEADER>
<DIV>Jaune
<DIV>Rose</DIV>
</DIV>
<FOOTER>Vert</FOOTER>
</BODY></HTML>
Grosso modo.

J'appliquerais ceci :
* Header et Footer en position fixed (Header par rapport à Top et footer par rapport à bottom et les deux par rapport à left)
* Position relative sur le Body
* Marge haute à Body (ou padding haut à Html) de la hauteur du Header
* Marge basse à Body (ou padding bas à Html) de la hauteur de Footer [dans le cas d'un footer toujours visible sinon le positionner en relatif par rapport à DIV Jaune qu'il faudra avoir placé lui aussi en Relative]
* Aucun scroll sur Html et Body
* Scroll vertical sur Div Jaune
* Height=100% sur Div Rose

De tête, je me dis que ça devrait le faire.
Hello,

Oui, il suffit d'utiliser le positionnement fixe CSS.
Par contre, pour empêcher le bloc de sortir d'une certaine zone, tu est obligé d'utiliser Javascript.
Bonjour,

Merci beaucoup pour vos réponses et votre aide.

Greg_Lumiere, j'ai essayé ta technique, ça fonctionne très bien mais ce n'est pas adapté à mon cas car mes bandeaux (header+footer) sont hauts donc je préfère ne pas les mettre en fixed.

En CSS, ça m'a l'air trop restrictif. Finalement, je vais utiliser jQuery Smiley lol

J'ai fait quelque chose dans ce style :
http://kitchen.net-perspective.com/open-source/scroll-follow/
Sujet clos
Aller à