粘性菜单/导航，固定菜单后框阴影不起作用

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;
}