липкое меню / навигация, тень от окна не работает при фиксированном меню

Question

У меня есть проблема с моим текущим меню / навигацией, что, когда меню становится фиксированным, тень от рамки исчезает (то же самое с границей).Но когда меню больше не фиксируется, оно возвращается.Кроме этого меню работает как задумано.

const nav = document.querySelector("#navigation");
const navTop = nav.offsetTop;

window.addEventListener("scroll", stickyNavigation);

function stickyNavigation() {
  if (window.scrollY >= navTop) {
    nav.classList.add("fixed-nav");

    console.log("sticky!!");
  } else {
    nav.classList.remove("fixed-nav");
  }
}

nav {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  height: 100%;
  width: 100vw;
  /* border-bottom: 3px solid #f341cc; */
  box-shadow: 0px 3px #f341cc;
}

nav a {
  padding: 30px;
  background-color: black;
  text-decoration: none;
  color: #f341cc;
  font-size: 2em;
  font-family: "Varela Round", sans-serif;
  text-align: center;
  width: 40%;
  flex-grow: 1;
  text-decoration: none;
}


/* ---- sticky menu --- */

.fixed-nav {
  position: fixed;
  top: 0;
  /*box-shadow: 0px 3px #f341cc;*/
  z-index: 1;
}

body {
  height: 200vh;
}

<nav id="navigation">
  <a href="">something</a>
  <a href="">something</a>
  <a href="">something</a>
</nav>

Answer 1

Уберите отсюда высоту 100%

nav {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    /* height: 100%; // Delete this */
    width: 100vw;
    /* border-bottom: 3px solid #f341cc; */
    box-shadow: 0px 3px #f341cc;
}

Answer 2

Удалить height: 100% из nav.Когда элемент становится fixed, он, вероятно, использует тело в качестве родителя позиции, а height: 100% становится целым экраном, который выталкивает тень и границу из экрана.

Пример:

const nav = document.querySelector("#navigation");
const navTop = nav.offsetTop;

window.addEventListener("scroll", stickyNavigation);

function stickyNavigation() {
  if (window.scrollY >= navTop) {
    nav.classList.add("fixed-nav");

    console.log("sticky!!");
  } else {
    nav.classList.remove("fixed-nav");
  }
}

nav {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  /* remove - height: 100%; */
  width: 100vw;
  /* border-bottom: 3px solid #f341cc; */
  box-shadow: 0px 3px #f341cc;
}

nav a {
  padding: 30px;
  background-color: black;
  text-decoration: none;
  color: #f341cc;
  font-size: 2em;
  font-family: "Varela Round", sans-serif;
  text-align: center;
  width: 40%;
  flex-grow: 1;
  text-decoration: none;
}


/* ---- sticky menu --- */

.fixed-nav {
  position: fixed;
  top: 0;
  /*box-shadow: 0px 3px #f341cc;*/
  z-index: 1;
}

body {
  height: 200vh;
}

<nav id="navigation">
  <a href="">something</a>
  <a href="">something</a>
  <a href="">something</a>
</nav>

Если вам нужно height: 100% для нефиксированной позиции, вы можете использовать псевдокласс :not():

nav:not(.fixed-nav) {
    height: 100%;
}