Question 297797 in Html Question posted in
Some basic documentation can be found here.

Html – in css how to get a nested element being sticky to the entire website?

I’m trying to achieve two stylings at the same time, one includes a sticky position, and the other includes a parent to the sticky element :

  1. I want the first section of my webpage to take the whole screen height (this section have a bottom element that should be at the bottom of the screen when opening the page, and the rest of the content should follow after)
  2. and I also want the navbar to stick to the top of the website

additionally, the navbar is somewhere on the middle of the height of the section at the beginning, and I want to find a solution that does not uses javascript, but css only.

here is a code snippet to make it clear, with two columns, one for both aspects of the problem :

body {
  margin: 0px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 10px;
}
.bottom {
  height: 50px;
  background-color: lightblue;
  margin: 10px 0px;
}
.content {
  height: 200vh;
  background-image: linear-gradient(red, yellow);
}
section.left header {
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  gap: 10px;
  height: 100vh;
  border: 1px solid blue;
}
nav {
  position: sticky;
  top: 0px;
}
<section class="left">
  <header>
    <h1>
     either I have the "bottom" element at the bottom of the screen view...
    </h1>
    <nav>
      <a href="#">link</a>
      <a href="#">link</a>
      <a href="#">link</a>
    </nav>
    <div class="bottom">bottom</div>
  </header>
  <div class="content">content</div>
</section>

<section class="right">
  <h1>
   ...or I have the navbar that stick through the entire website. But how to have both ?
  </h1>
  <nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
  <div class="bottom">bottom</div>
  <div class="content">content</div>
</section>

It’s easy to make the navbar sticks through the entire website if it’s a direct child of the body (or any element that have the height of the website, like the <section> in my example), and it’s easy to have the bottom element placed at the bottom of the screen if everything that appears at the top of the page is inside a wrapper, including the navbar.

But one prevents the other : the bottom element needs the wrapper, and the wrapper prevents the navbar to stick through the entire website. That’s my issue !

I don’t feel like there is a solution to make the navbar sticky to it’s grandparent (in this situation, because I know it’s sometimes possible), so maybe it’s better to find a solution to have the bottom element being at the bottom of the screen view ?

Tags:

2

Answers


  1. 0

    For sticky navbar

    <div id="navbar">Navbar</div>

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

    For fixed element at bottom 

    <div id="bottom">bottom</botton>

#bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}
    Login or Signup to reply.
  2. 0

    I would use some Javascript to achieve this. Use the setup you have in the left column. Add some script to clone the <nav> element and insert the copy as the first child of the body, but make it invisible to begin with. Then use an intersection observer to detect when the first section leaves the viewport; when it does, make the copied <nav> visible. If the user scrolls back up and the first section re-enters the viewport, make the copied <nav> invisible.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search