0
Ich möchte eine Sidebar-Navigation, die eine Art wie position: sticky und position: fixed zusammen verhalten.
Ich kann kein sticky-Element mit einer dynamischen Höhe erstellen. Im Idealfall möchte ich es nur mit CSS machen.Position sticky, aber immer im Ansichtsfenster unten
Die Sidebar ist nach einer Kopfzeile (die nicht behoben ist), und ich möchte die Seitenleiste an der Spitze des Browsers bleiben, wenn Sie über die Kopfzeile scrollen (so position: sticky ist toll dafür).
Aber ich möchte, dass die Unterseite meiner Seitenleiste immer unten in der Browseransicht ist. Wie position: fixed.
Mein Ergebnis so weit ist der folgende Ausschnitt:
Wenn Sie an der Spitze des Snippets sind, und blättern Sie am unteren Rand der Seitenleiste Artikel 18 verborgen bleibt, da die Seitenleiste über die Sicht gehen.
Wenn Sie über die Kopfzeile im Hauptcontainer blättern, ist die Seitenleiste in Ordnung, da sie eine 100vh Größe hat.
Ich würde gerne bottom: 0; auf das klebrige Element setzen, unten befestigt werden, aber es funktioniert nur, wenn ich das klebrige Element auf position: fixed; setze und dann natürlich nicht mehr oben haftet.
.header {
background-color: grey;
height: 30px;
}
.container {
display: flex;
}
.nav {
color: white;
background-color: black;
width: 7rem;
}
.sticky-nav {
position: sticky;
top: 0;
height: 100vh;
overflow-y: scroll;
}
.content {
background-color: #ccc;
width: 100%;
}<div class="header">Header</div>
<div class="container">
<div class="nav">
<div class="sticky-nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
<p>Item 7</p>
<p>Item 8</p>
<p>Item 9</p>
<p>Item 10</p>
<p>Item 11</p>
<p>Item 12</p>
<p>Item 13</p>
<p>Item 14</p>
<p>Item 15</p>
<p>Item 16</p>
<p>Item 17</p>
<p>Item 18</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
</div>
</div>
Vielen Dank für Ihre Hilfe, aber ich will nicht der Header festgelegt werden. Deshalb ist es schwierig. Vielleicht ist das mit CSS nicht möglich. Ich werde meine Frage präzisieren. – Samy