Navigation Bar Sticky - SCSS

1

I was able to make the navbar stick to the top of the screen when the user scrolls past it, but it causes a bump, breaking the flow. How does one fix this?

// * NAVIGATION BAR STYLING
.nav__container {
  background: colors(col-light-black);
  height: 5rem;
  border-bottom: 3px solid colors(col-orange);
  display: flex;
  justify-content: start;
  align-items: center;
}

.links-wrapper {
  list-style: none;
  text-transform: uppercase;
  display: flex;
  margin-left: 2rem;
}

a {
  text-decoration: none;
}

.page-link {
  padding: 0;
  margin: 0 2.5rem;
  transition: 0.5s;
  @include responsive(lg) {
    margin: 0 1.8rem;
  }
  @include responsive(md) {
    //TODO HAMBURGER MENU
  }
  &:hover {
    color: colors(col-primary-blue);
    cursor: pointer;
  }
  &:active {
    color: colors(col-dark-blue);
  }
}

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

.sticky + .content {
  padding-top: 6rem;
}

<nav class="nav__container">
        <ul class="links-wrapper">
          <li class="page-link li" onclick="redirect('#header')">Home</li>
          <li class="page-link li" onclick="redirect('#about')">About</li>
          <li class="page-link li" onclick="redirect('#skills')">Skills</li>
          <li class="page-link li" onclick="redirect('#projects')">Projects</li>
          <li class="page-link li" onclick="redirect('#contact')">Contact</li>
        </ul<
</nav>

// * STICKY NAVBAR
window.onscroll = function() {
  stickyAdd();
};

const navbar = document.querySelector(".nav__container");
let sticky = navbar.offsetTop;
function stickyAdd() {
  if (window.pageYOffset - 50 >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}
2

Hello there! first of all I have notice that you need to close the ul tag properly.
Second, tried to check the code you provide us but seems like something might be missing because when I tried to check it out the nav wouldn’t stick to the top. So I don’t know if I fully get what you need. But have you tried adding a z-index and giving it a high value? With that it should work smoothly because the nav will always be on top of any other element without breaking the flow :slightly_smiling_face: I hope that helps!

3

When and how are you adding the sticky class? Also as you are using top: 0 does it have to be sticky or can you just use position fixed instead?

If you can post a Codepen that shows the problem it would help a lot.

4

Oops sorry I forgot to add the JavaScript code snippet… It should be added back to the original post.

5

When using position: fixed it also needs to say top:0 or else the nav bar will be positioned at the bottom of the view port.

6

I’m confused about your use of that JS. What exactly is it you want to have happen?

As it is now you allow for some scrolling before adding the class. Is that the intention and if so how should the nav behave when it receives the class. How should it change its position without jumping down the page. The only thing I can think of would be to transition or animate it, so the “jump” is smooth.

Sure you still need to use the offset. I was fishing for your usecase for position sticky and why it was needed.

7

So what I am trying to recreate is the nav bar in this website.

8

OK that makes more sense. It has an animation (popDown) on it.

@keyframes popDown {
  0% {
    transform: translateY(-100px);
  } 
}

Here is a quick pen

Also, I somehow missed the fact that you are using position fixed and not position sticky, I guess I just read the title and assumed something incorrect sorry for the confusion.