粘性菜單/導航，固定菜單后框陰影不起作用

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

移除height: 100%從nav移除height: 100% 。 當元素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%;
}

Answer 2

從這里移除高度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;
}