J'ai créé une barre latérale à l'aide de position: sticky et cela fonctionne très bien.
Veuillez consulter le script ci-dessous pour l'identification des couleurs avec le texte suivant.
Au fur et à mesure que la zone noire défile vers le bas, la zone verte reste collée à sa position par rapport à la barre supérieure rouge. Mais la zone verte a un contenu qui déborde de la fenêtre de la page.
Lorsque le défilement approche de la fin de la page, c'est-à-dire exactement lorsque la hauteur de la zone verte survolée est égale à la hauteur du défilement restant dans la page, la zone verte commence à se déplacer.
Mais je veux déplacer la zone verte pour qu'elle défile en même temps que la zone noire, et qu'elle reste en place lorsqu'elle a atteint sa fin. Cela signifie que lorsque la hauteur de la barre latérale est supérieure à la fenêtre, la barre latérale doit défiler dans le sens de défilement de la fenêtre avant d'être fixée. (En bref : je veux qu'elle se déplace comme la barre latérale de Facebook ou quelque chose comme ça. https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html )
Est-ce que c'est possible avec position:sticky ? Avec un peu d'aide avec javascript et jquery ?
Je ne veux pas aller avec des vieux position:fixed comme peu d'autres libéraux quand position:sticky est là !
* {
font-family: "Courier New", Courier, monospace;
color: #fff;
text-align: center;
}
.container {
height: 2000px;
position: relative;
}
.topbar {
height: 50px;
line-height: 50px;
background: #D16666;
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 0px;
z-index: 10;
}
.sidebar {
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 60px;
height: 1000px;
line-height: 1000px;
background: #B6C649;
border-radius: 5px;
position: -webkit-sticky;
position: sticky;
}
.row {
margin-left: 0;
margin-right: 0;
position: relative;
}
.main-content {
height: 1800px;
line-height: 1800px;
background: #2C4251;
border-radius: 5px;
top: 10px;
}
.col-8 {
top: 10px;
padding: 0;
padding-left: 0 !important;
}
<html>
<head>
<link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="topbar">Topbar</div>
<div class="row">
<div class="col-4">
<div class="sidebar">Sidebar</div>
</div>
<div class="col-8">
<div class="main-content">Main Content</div>
</div>
</div>
</div>
</body>
</html>
