[英]sticky menu/navigation, box shadow not working when menu is fixed
I have this issue with my current menu/navigation that when the menu becomes fixed the box shadow disappears (same thing with border). 我当前的菜单/导航存在此问题,当菜单固定后,框阴影消失(带有边框的东西)。 But when the menu is no longer fixed it comes back.
但是,当菜单不再固定时,它将返回。 Other than that the menu works as intended.
除此之外,菜单还可以正常工作。
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>
Remove the height: 100%
from the nav
. 移除
height: 100%
从nav
移除height: 100%
。 When the element becomes fixed
it probably uses the body as the position parent, and the height: 100%
becomes the whole screen, which pushes the shadow and the border out of the screen. 当元素
fixed
它可能会使用主体作为位置父对象,而height: 100%
将成为整个屏幕,从而将阴影和边框推出屏幕。
Example: 例:
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>
If you need height: 100%
for the non fixed position, you can use the :not()
pseudo class: 如果您需要非固定位置的
height: 100%
,则可以使用:not()
伪类:
nav:not(.fixed-nav) {
height: 100%;
}
Remove from here height 100% 从这里移除高度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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.