I am experimenting with sticky navigation and I ran into problem. The problem is that when I put the navigation element in other element it's not 'sticky' anymore.
.nav-wrapper{
position: absolute;
bottom: 0;
}
.nav-wrapper nav{
position: sticky;
top: 0;
}<div class="nav-wrapper">
<nav>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
</nav>
</div>position:sticky considers the parent element to behave as it should be. In your case the parent element has its height defined by the sticky element so there is no room for the element to have a sticky behavior.
Add a border to better see the issue:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>Now add height to the parent element and see what is happening:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
height:80vh;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.ref
Related questions:
Why bottom:0 doesn't work with position:sticky?
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
.container {
display: flex;
}
.side-bar {
width: 250px;
position: sticky;
top: 0;
max-height: 100vh;
}
.content-box {
width: calc(100% - 250px);
}<div class="content">
<div class="container">
<div class="side-bar">
<ul>
<li>
<a href="#link1">Link 1</a>
</li>
<li>
<a href="#link2">Link 2</a>
</li>
<li>
<a href="#link3">Link 3</a>
</li>
<li>
<a href="#link4">Link 4</a>
</li>
</ul>
</div>
<div class="content-box">
<!-- Link conent-->
<div id="link1">
<h1>Link One</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
sequi voluptates ratione iure quidem cum tempora! Voluptate
consequatur numquam assumenda natus eum quisquam non repudiandae
corrupti, dignissimos omnis enim voluptatem, exercitationem
incidunt beatae. Dignissimos eius maxime ullam rem praesentium
iusto natus cum corporis rerum, voluptates recusandae ea
repudiandae dicta autem ex! Repellat iusto, sit ratione suscipit
quidem reiciendis, similique laboriosam nemo, ipsa sint sapiente
amet itaque enim aliquam eligendi molestias tenetur at adipisci?
Sint, blanditiis. Molestiae nobis, quam sequi sapiente id
voluptate corrupti commodi voluptas alias distinctio nam sunt
ipsam ad non ratione exercitationem, nihil deleniti maiores velit
labore quibusdam reprehenderit impedit deserunt! Reiciendis nemo
ducimus fugiat perferendis esse ut accusantium officiis, neque
minima voluptates ipsum corrupti, quo ratione rem tempora?
Laudantium, quidem? Dolor laudantium fuga nihil odit, autem
asperiores iste explicabo. Officia rerum ab facilis odio explicabo
minima maiores distinctio a cumque, mollitia beatae sunt ullam
soluta et exercitationem est quae. Fugiat cum veniam nostrum,
ullam laudantium porro debitis reprehenderit natus, consectetur
qui neque labore maxime. Obcaecati repudiandae, ab cupiditate
deleniti repellat commodi id ullam, dignissimos quidem, fugiat
saepe dolor distinctio odit recusandae accusantium nemo. Fugit
dolorem quibusdam laboriosam? Alias voluptatem corporis quos. Sint
quod eos, dignissimos, tempore similique repudiandae deserunt aut
voluptate quis nulla sequi quam fugiat impedit? Laudantium fugiat
magnam earum amet, accusantium nostrum veritatis eum, et minima ut
cupiditate molestias totam corporis sit suscipit cumque?
Repudiandae commodi officia minima, nesciunt ex labore veniam quos
libero eum porro et quibusdam facere esse earum debitis culpa
quisquam eius quia quae eligendi? Libero, ullam esse quas quisquam
at et provident officia similique iste porro nisi aliquid, dolor
delectus velit. Corporis, eum corrupti. Aspernatur perspiciatis
sed inventore vitae fugiat deleniti vero exercitationem ut ex
assumenda nulla porro unde aperiam, ullam ipsum in non tempore
repudiandae harum quasi dolorum. Quas sint ab voluptatum,
praesentium, neque reiciendis voluptas quae quisquam aperiam
quibusdam, illum iusto quo et impedit porro tenetur animi sapiente
eligendi ipsam ad voluptate! Nesciunt quas sunt molestiae
laboriosam? Natus quo at a officia cupiditate autem, numquam
sapiente maxime fugiat beatae quis amet voluptates. Facere ducimus
natus magni ipsa numquam nobis laborum quisquam itaque assumenda
quaerat commodi vel vero dolores, accusantium, adipisci quasi
iusto quis consectetur, eligendi asperiores inventore distinctio.
Ut officiis molestiae dolorum, recusandae doloremque accusantium
dignissimos atque ad omnis. Ex perspiciatis, commodi labore veniam
eos a exercitationem deleniti eaque in quaerat corrupti atque
tenetur voluptate, sint libero quo? Alias pariatur itaque eligendi
voluptas tenetur, nobis eveniet, ex dolorem modi consequatur
dolore recusandae nostrum! Alias numquam nemo perspiciatis libero,
blanditiis in aliquid placeat quia velit iste repudiandae rem
laborum ratione molestiae quas beatae, nulla, suscipit quos
commodi at deleniti vel incidunt distinctio recusandae! Fugit
voluptatum officiis mollitia necessitatibus aperiam temporibus est
dolores atque inventore minus quam unde ipsum alias sapiente sint
dolorem ullam, placeat commodi adipisci maxime suscipit odio
reiciendis labore quasi. Architecto vero repudiandae voluptatum
vel temporibus, ea omnis sapiente. Ut, eligendi doloribus error
ullam obcaecati sint sequi. Ipsa debitis doloribus nulla soluta!
Distinctio sed placeat eos blanditiis delectus.
</p>
</div>
<!-- Link conent-->
<!-- Link conent-->
<div id="link2">
<h1>Link Two</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
sequi voluptates ratione iure quidem cum tempora! Voluptate
consequatur numquam assumenda natus eum quisquam non repudiandae
corrupti, dignissimos omnis enim voluptatem, exercitationem
incidunt beatae. Dignissimos eius maxime ullam rem praesentium
iusto natus cum corporis rerum, voluptates recusandae ea
repudiandae dicta autem ex! Repellat iusto, sit ratione suscipit
quidem reiciendis, similique laboriosam nemo, ipsa sint sapiente
amet itaque enim aliquam eligendi molestias tenetur at adipisci?
Sint, blanditiis. Molestiae nobis, quam sequi sapiente id
voluptate corrupti commodi voluptas alias distinctio nam sunt
ipsam ad non ratione exercitationem, nihil deleniti maiores velit
labore quibusdam reprehenderit impedit deserunt! Reiciendis nemo
ducimus fugiat perferendis esse ut accusantium officiis, neque
minima voluptates ipsum corrupti, quo ratione rem tempora?
Laudantium, quidem? Dolor laudantium fuga nihil odit, autem
asperiores iste explicabo. Officia rerum ab facilis odio explicabo
minima maiores distinctio a cumque, mollitia beatae sunt ullam
soluta et exercitationem est quae. Fugiat cum veniam nostrum,
ullam laudantium porro debitis reprehenderit natus, consectetur
qui neque labore maxime. Obcaecati repudiandae, ab cupiditate
deleniti repellat commodi id ullam, dignissimos quidem, fugiat
saepe dolor distinctio odit recusandae accusantium nemo. Fugit
dolorem quibusdam laboriosam? Alias voluptatem corporis quos. Sint
quod eos, dignissimos, tempore similique repudiandae deserunt aut
voluptate quis nulla sequi quam fugiat impedit? Laudantium fugiat
magnam earum amet, accusantium nostrum veritatis eum, et minima ut
cupiditate molestias totam corporis sit suscipit cumque?
Repudiandae commodi officia minima, nesciunt ex labore veniam quos
libero eum porro et quibusdam facere esse earum debitis culpa
quisquam eius quia quae eligendi? Libero, ullam esse quas quisquam
at et provident officia similique iste porro nisi aliquid, dolor
delectus velit. Corporis, eum corrupti. Aspernatur perspiciatis
sed inventore vitae fugiat deleniti vero exercitationem ut ex
assumenda nulla porro unde aperiam, ullam ipsum in non tempore
repudiandae harum quasi dolorum. Quas sint ab voluptatum,
praesentium, neque reiciendis voluptas quae quisquam aperiam
quibusdam, illum iusto quo et impedit porro tenetur animi sapiente
eligendi ipsam ad voluptate! Nesciunt quas sunt molestiae
laboriosam? Natus quo at a officia cupiditate autem, numquam
sapiente maxime fugiat beatae quis amet voluptates. Facere ducimus
natus magni ipsa numquam nobis laborum quisquam itaque assumenda
quaerat commodi vel vero dolores, accusantium, adipisci quasi
iusto quis consectetur, eligendi asperiores inventore distinctio.
Ut officiis molestiae dolorum, recusandae doloremque accusantium
dignissimos atque ad omnis. Ex perspiciatis, commodi labore veniam
eos a exercitationem deleniti eaque in quaerat corrupti atque
tenetur voluptate, sint libero quo? Alias pariatur itaque eligendi
voluptas tenetur, nobis eveniet, ex dolorem modi consequatur
dolore recusandae nostrum! Alias numquam nemo perspiciatis libero,
blanditiis in aliquid placeat quia velit iste repudiandae rem
laborum ratione molestiae quas beatae, nulla, suscipit quos
commodi at deleniti vel incidunt distinctio recusandae! Fugit
voluptatum officiis mollitia necessitatibus aperiam temporibus est
dolores atque inventore minus quam unde ipsum alias sapiente sint
dolorem ullam, placeat commodi adipisci maxime suscipit odio
reiciendis labore quasi. Architecto vero repudiandae voluptatum
vel temporibus, ea omnis sapiente. Ut, eligendi doloribus error
ullam obcaecati sint sequi. Ipsa debitis doloribus nulla soluta!
Distinctio sed placeat eos blanditiis delectus.
</p>
</div>
<!-- Link conent-->
<!-- Link conent-->
<div id="link3">
<h1>Link Three</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
sequi voluptates ratione iure quidem cum tempora! Voluptate
consequatur numquam assumenda natus eum quisquam non repudiandae
corrupti, dignissimos omnis enim voluptatem, exercitationem
incidunt beatae. Dignissimos eius maxime ullam rem praesentium
iusto natus cum corporis rerum, voluptates recusandae ea
repudiandae dicta autem ex! Repellat iusto, sit ratione suscipit
quidem reiciendis, similique laboriosam nemo, ipsa sint sapiente
amet itaque enim aliquam eligendi molestias tenetur at adipisci?
Sint, blanditiis. Molestiae nobis, quam sequi sapiente id
voluptate corrupti commodi voluptas alias distinctio nam sunt
ipsam ad non ratione exercitationem, nihil deleniti maiores velit
labore quibusdam reprehenderit impedit deserunt! Reiciendis nemo
ducimus fugiat perferendis esse ut accusantium officiis, neque
minima voluptates ipsum corrupti, quo ratione rem tempora?
Laudantium, quidem? Dolor laudantium fuga nihil odit, autem
asperiores iste explicabo. Officia rerum ab facilis odio explicabo
minima maiores distinctio a cumque, mollitia beatae sunt ullam
soluta et exercitationem est quae. Fugiat cum veniam nostrum,
ullam laudantium porro debitis reprehenderit natus, consectetur
qui neque labore maxime. Obcaecati repudiandae, ab cupiditate
deleniti repellat commodi id ullam, dignissimos quidem, fugiat
saepe dolor distinctio odit recusandae accusantium nemo. Fugit
dolorem quibusdam laboriosam? Alias voluptatem corporis quos. Sint
quod eos, dignissimos, tempore similique repudiandae deserunt aut
voluptate quis nulla sequi quam fugiat impedit? Laudantium fugiat
magnam earum amet, accusantium nostrum veritatis eum, et minima ut
cupiditate molestias totam corporis sit suscipit cumque?
Repudiandae commodi officia minima, nesciunt ex labore veniam quos
libero eum porro et quibusdam facere esse earum debitis culpa
quisquam eius quia quae eligendi? Libero, ullam esse quas quisquam
at et provident officia similique iste porro nisi aliquid, dolor
delectus velit. Corporis, eum corrupti. Aspernatur perspiciatis
sed inventore vitae fugiat deleniti vero exercitationem ut ex
assumenda nulla porro unde aperiam, ullam ipsum in non tempore
repudiandae harum quasi dolorum. Quas sint ab voluptatum,
praesentium, neque reiciendis voluptas quae quisquam aperiam
quibusdam, illum iusto quo et impedit porro tenetur animi sapiente
eligendi ipsam ad voluptate! Nesciunt quas sunt molestiae
laboriosam? Natus quo at a officia cupiditate autem, numquam
sapiente maxime fugiat beatae quis amet voluptates. Facere ducimus
natus magni ipsa numquam nobis laborum quisquam itaque assumenda
quaerat commodi vel vero dolores, accusantium, adipisci quasi
iusto quis consectetur, eligendi asperiores inventore distinctio.
Ut officiis molestiae dolorum, recusandae doloremque accusantium
dignissimos atque ad omnis. Ex perspiciatis, commodi labore veniam
eos a exercitationem deleniti eaque in quaerat corrupti atque
tenetur voluptate, sint libero quo? Alias pariatur itaque eligendi
voluptas tenetur, nobis eveniet, ex dolorem modi consequatur
dolore recusandae nostrum! Alias numquam nemo perspiciatis libero,
blanditiis in aliquid placeat quia velit iste repudiandae rem
laborum ratione molestiae quas beatae, nulla, suscipit quos
commodi at deleniti vel incidunt distinctio recusandae! Fugit
voluptatum officiis mollitia necessitatibus aperiam temporibus est
dolores atque inventore minus quam unde ipsum alias sapiente sint
dolorem ullam, placeat commodi adipisci maxime suscipit odio
reiciendis labore quasi. Architecto vero repudiandae voluptatum
vel temporibus, ea omnis sapiente. Ut, eligendi doloribus error
ullam obcaecati sint sequi. Ipsa debitis doloribus nulla soluta!
Distinctio sed placeat eos blanditiis delectus.
</p>
</div>
<!-- Link conent-->
<!-- Link conent-->
<div id="link4">
<h1>Link Four</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
sequi voluptates ratione iure quidem cum tempora! Voluptate
consequatur numquam assumenda natus eum quisquam non repudiandae
corrupti, dignissimos omnis enim voluptatem, exercitationem
incidunt beatae. Dignissimos eius maxime ullam rem praesentium
iusto natus cum corporis rerum, voluptates recusandae ea
repudiandae dicta autem ex! Repellat iusto, sit ratione suscipit
quidem reiciendis, similique laboriosam nemo, ipsa sint sapiente
amet itaque enim aliquam eligendi molestias tenetur at adipisci?
Sint, blanditiis. Molestiae nobis, quam sequi sapiente id
voluptate corrupti commodi voluptas alias distinctio nam sunt
ipsam ad non ratione exercitationem, nihil deleniti maiores velit
labore quibusdam reprehenderit impedit deserunt! Reiciendis nemo
ducimus fugiat perferendis esse ut accusantium officiis, neque
minima voluptates ipsum corrupti, quo ratione rem tempora?
Laudantium, quidem? Dolor laudantium fuga nihil odit, autem
asperiores iste explicabo. Officia rerum ab facilis odio explicabo
minima maiores distinctio a cumque, mollitia beatae sunt ullam
soluta et exercitationem est quae. Fugiat cum veniam nostrum,
ullam laudantium porro debitis reprehenderit natus, consectetur
qui neque labore maxime. Obcaecati repudiandae, ab cupiditate
deleniti repellat commodi id ullam, dignissimos quidem, fugiat
saepe dolor distinctio odit recusandae accusantium nemo. Fugit
dolorem quibusdam laboriosam? Alias voluptatem corporis quos. Sint
quod eos, dignissimos, tempore similique repudiandae deserunt aut
voluptate quis nulla sequi quam fugiat impedit? Laudantium fugiat
magnam earum amet, accusantium nostrum veritatis eum, et minima ut
cupiditate molestias totam corporis sit suscipit cumque?
Repudiandae commodi officia minima, nesciunt ex labore veniam quos
libero eum porro et quibusdam facere esse earum debitis culpa
quisquam eius quia quae eligendi? Libero, ullam esse quas quisquam
at et provident officia similique iste porro nisi aliquid, dolor
delectus velit. Corporis, eum corrupti. Aspernatur perspiciatis
sed inventore vitae fugiat deleniti vero exercitationem ut ex
assumenda nulla porro unde aperiam, ullam ipsum in non tempore
repudiandae harum quasi dolorum. Quas sint ab voluptatum,
praesentium, neque reiciendis voluptas quae quisquam aperiam
quibusdam, illum iusto quo et impedit porro tenetur animi sapiente
eligendi ipsam ad voluptate! Nesciunt quas sunt molestiae
laboriosam? Natus quo at a officia cupiditate autem, numquam
sapiente maxime fugiat beatae quis amet voluptates. Facere ducimus
natus magni ipsa numquam nobis laborum quisquam itaque assumenda
quaerat commodi vel vero dolores, accusantium, adipisci quasi
iusto quis consectetur, eligendi asperiores inventore distinctio.
Ut officiis molestiae dolorum, recusandae doloremque accusantium
dignissimos atque ad omnis. Ex perspiciatis, commodi labore veniam
eos a exercitationem deleniti eaque in quaerat corrupti atque
tenetur voluptate, sint libero quo? Alias pariatur itaque eligendi
voluptas tenetur, nobis eveniet, ex dolorem modi consequatur
dolore recusandae nostrum! Alias numquam nemo perspiciatis libero,
blanditiis in aliquid placeat quia velit iste repudiandae rem
laborum ratione molestiae quas beatae, nulla, suscipit quos
commodi at deleniti vel incidunt distinctio recusandae! Fugit
voluptatum officiis mollitia necessitatibus aperiam temporibus est
dolores atque inventore minus quam unde ipsum alias sapiente sint
dolorem ullam, placeat commodi adipisci maxime suscipit odio
reiciendis labore quasi. Architecto vero repudiandae voluptatum
vel temporibus, ea omnis sapiente. Ut, eligendi doloribus error
ullam obcaecati sint sequi. Ipsa debitis doloribus nulla soluta!
Distinctio sed placeat eos blanditiis delectus.
</p>
</div>
<!-- Link conent-->
</div>
</div>
</div>position: sticky works only in context of the "containing block" - i.e. the nearest ancestor that is a block level element - usually, the immediate container
it does not work in context of NOT immediate containers
even if you explicitly make the immediate container not a "scroll container" by setting "overflow: visible", CSS still considers it the scroll container and the element won't stick to an outer div that is scrollable
specification could be more clear on this https://www.w3.org/TR/css-position-3
