CODEWITHSUNDEEP
htmlcssscrollcss-positionsticky
Arnav Borborah
Arnav Borborah

Reputation: 11769

How do I force a sticky navbar to "overlay" its content

Let's say I have a navbar like the following:

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 100px;
  height: 100%;
  transform: translateX(50px);
  /* An example transform (I can't use position: fixed) */
  background-color: green;
  overflow-y: scroll;
}

.navbar {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 0, 0.5);
  top: 0;
}

.navbar.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.navbar.fixed {
  position: fixed;
}
<div class="container">
  <div class="navbar sticky">
  </div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

As you can see before scrolling, the sticky navbar is initially above the content paragraphs. However, if the navbar class is changed from sticky to fixed, then the navbar does overlay the content (like I want), but it does not scroll with the container, since it is transformed.

How do I force sticky navbar to place the content after it underneath it so that it always behaves like an overlay to the content after it?

If the above isn't possible, then how do I force a fixed navbar to scroll with the user in a transformed container? Note that I want to avoid something similar to this answer (which is what I am currently using), because it results in jittery movements on the fixed container when scrolling.

Upvotes: 0

Views: 1250

Answers (1)

JRoss
JRoss

Reputation: 1395

Subtracting the height of the navbar from the navbar with margin-bottom will work.

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 100px;
  height: 100%;
  transform: translateX(50px);
  /* An example transform (I can't use position: fixed) */
  background-color: green;
  overflow-y: scroll;
}

.navbar {
  --navbarheight: 50px;
  width: 100%;
  height: var(--navbarheight);;
  background-color: rgba(255, 255, 0, 0.5);
  top: 0;
}

.navbar.sticky {
  position: -webkit-sticky;
  position: sticky;
  margin-bottom: calc(0px - var(--navbarheight)); /* or -50px in other words */
}

.navbar.fixed {
  position: fixed;
}
<div class="container">
  <div class="navbar sticky">
  </div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Upvotes: 1

Related Questions