Grid-Layout ; Sidebar et content scrollables indépendamment

Bonjour,
Pour voir l'exemple où j'en suis (merci pour l'aide reçue dans mes précédents posts) :
mygridlayout.cahue.net/basics.html
Ce que j'ai arrivé à faire :
- lorsqu'on scrolle le contenu , la barre de navigation prend une position sticky.
- si le contenu de la sidebar est trop long pour être affiché entièrement, j'ai mis un overflow-y: auto
Ce que je n'arrive pas à faire :
Je souhaiterai que le contenu, et même plutôt la Sidebar reste elle-meme en position sticky par rapport à la barre de navigation lorsqu'après le scroll elle a pris sa position sticky.
Cordialement
Modifié par cpalo (18 Jun 2018 - 22:19)

Hello,

Que ce soit pour la sidebar ou la navigation, tu peux regarder du coté de position:sticky qui sera bien mieux et plus smart que le JS que tu as mis en place.

En JS, lorsque tu ajoutes une position fixed lors du scroll, l'élément sors du flux et les éléments suivants se décallent vers le haut. Tu éviteras ce genre de problème avec sticky en css

Edit : si tu veux le tester simplement sur la navigation, tu peux ajouter simplement

#sticky{
position: sticky;
top: 0;
}

Pour ta sidebar, tu devras trouver une valeur top différente (voir calculée en JS)
Modifié par Yordi (11 Jun 2018 - 13:02)

Oups.. c'était bien position: sticky que je voulais utiliser.. Une erreur de copier-coller de mon ancienne version.
Par contre je ne vois pas comment se passer du js, puisque cette position sticky n'est prise que lorsqu'il y a eu un certain scroll?

Effectivement avec position: sticky , a-priori pas besoin de js pour la barre de navigation.
Par contre pour la sidebar, cela ne fonctionne pas.

Bonsoir,
Voilà où j'en suis :
La sidebar et le content sont bien scrollables séparément
le menu de la sidebar reste bien fixe
Mais le header et le footer restent fixes
mygridlayout.cahue.net/sidebar-scrollable-3.html
Si je rends le footer fixé au bas du viewport ou de la page ( suivant la longueur du contenu) avec un min-height: 100vh sur le body, alors je perds le scroll...

Oups: je dois passer à côté de quelque chose car les liens que j'indique ne sont pas cliquables
Modifié par cpalo (18 Jun 2018 - 22:21)

Hello,
Si j'ai bien compris ton problème , c'est un comportement normal étant donné que tu as un overflow: auto sur .bg-MainContent.

Autre chose que je trouve étrange, c'est de donner une largeur à ta sidebar en vh. Si tu décides (sur ton écran 30") d'avoir une hauteur de fenêtre pas très haute, tu vas te retrouver dans un cas pas très lisible. Dans tout le cas, le mieux serait une unité de largeur et pas de hauteur (vw, %, em, rem, fr,...) et un min-width. Aussi, prévoit une media querie pour la version mobile/tablette/"ce que tu veux pour que ton layout/contenu soit bien affiché".

Bonjour,

le 30vh pour la largeur de la sidebar c'est une erreur.. j'utilise des rem.
Je n'oublie pas les mediaqueries, mais là c'est seulement un exemple pour le problème que je rencontre.
overflow: auto sur bg-MainContent car si on le met sur article inclus dans bg-MainContent le contenu dépasse du bg-MainContent.
Modifié par cpalo (20 Jun 2018 - 18:52)

Ok du coup je n'ai pas vraiment compris le problème, sorry

Effectivement j'ai des solutions "partielles" qui fonctionnement!! mais pas en les regroupant!!
Ta remarque sur l'overflow m'a fait réflechir. Et là j'ai tout faux..
Ce que je veux :
- le header fixe
- le footer fixé au bottom du viewport si pas assez de contenu, sinon au bottom du bg-Content si contenu assez long. ====> donc surtout pas de overflow-y sur le bg-Content
- les deux sidebar restent fixed et ne suivent pas le mouvement du content

Zn fait le problème que j'ai c'est comment rendre fixed une sidebar sans rendre scrollable le content?
Modifié par cpalo (21 Jun 2018 - 14:21)

ok, je réfléchis tout haut pour essayer de t'aider. Je ne sais pas si c'est la bonne/meilleur manière de faire et si ça répond entièrement à ta question mais essayons

Et si tu découpais un peu plus ta grid, dans ce style :

header                header
navTitle               main
navContent        main
footer                  footer

Ensuite ajouter un sticky sur header et navTitle…
Tu peux garder 1fr sur navContent et main
Tu aura ton scroll sur body, et en ajouter un simplement sur navContent pour gérer le contenu plus long que le main (?).
Modifié par Yordi (22 Jun 2018 - 12:15)