SmoothScroll + Sticky Nav issue

[Adesh]

Hello,

 

I want the header to be sticky when the user scrolls from bottom to top. I've tried everything, but it's not compatible with smoothscroll js.

Could you please check and let me know why the header sticky isn't working with smoothscroll?

See the Pen JjaXJeV by Adesh-Evince (@Adesh-Evince) on CodePen

[Rodrigo]

Hi,

 

The reason you're seeing this behaviour is because once you add a transform to an element, anything with position: fixed won't work as expected:

https://stackoverflow.com/a/15256339/2456879

 

The solution is to move the <nav> element outside the transformed wrapper:

<div class="main">
  <nav>Header</nav>
  <div class="page--wrapper">
    <section style="background-color: red">Section1</section>
    <section style="background-color: yellow">Section2</section>
    <section style="background-color: blue">Section3</section>
    <section style="background-color: green">Section4</section>
  </div>
</div>

nav {
  background-color: black;
  height: 50px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
section {
  height: 100vh;
  font-size: 100px;
  color: #fff;
  text-align: center;
}

Hopefully this helps.

Happy Tweening!

[Adesh]

Hello @Rodrigo

 

Is there any other way to we can keep nav inside and page wrapper and can do fixed on scroll?

Because i want multiple element to be fixed from my web page.

[Rodrigo]

Hi,

 

Sorry, no way around it as far as I can tell. Maybe there is some slick CSS trick that I'm not aware of 🤷‍♂️

 

Sorry I can't be of more assistance.

Happy Tweening!