当页面导航滚动到内容上方时,我希望导航显示投影效果,以更容易区分内容和导航。投影效果还应该使用过渡效果,使其更加平滑。
当在滚动超过断点之后将box-shadow应用于导航时,投影的过渡效果不起作用。但是,当将相同样式应用于悬停选择器时,过渡效果是有效的。
我正在使用gatsby进行项目开发,但这是一个react/js问题,只是提一下,如果在将其应用于gatsby项目时有任何注意事项,请告诉我。
请注意,我正在使用styled-components为组件进行样式设置。我使用“CSS:${condition && css-style}”语法进行条件渲染,它可以与styled-components一起使用。
我已经尝试使用动画,它可以工作,但是每次滚动页面时都会运行它。
class App extends Component {
constructor() {
super();
this.state = {
scrollPos: 0
};
}
componentDidMount() {
window.addEventListener("scroll", this.updateScroll);
this.updateScroll();
}
componentWillUnmountt() {
window.removeEventListener("scroll", this.updateScroll);
}
updateScroll = () =>
this.setState({ scrollPos: document.documentElement.scrollTop });
render() {
let breakpointScroll = 20;
const Header = styled.div`
position: fixed;
width: 100vw;
height: 90px;
background-color: white;
font-size: 26px;
color: coral;
text-align: center;
transition: all 200ms ease;
/* Problem here */
box-shadow: ${this.state.scrollPos >= breakpointScroll &&
"0px 1px 5px rgba(0, 0, 0, 0.25)"};
/* This seems to work perfect */
:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}
`;
return (
<>
<Header>Header</Header>
<Text>Scroll position: {this.state.scrollPos}</Text>
{/* IGNORE, content for scroll */}
<Box />
<Box backgroundColor="lightblue" />
<Box />
{/* IGNORE, content for scroll */}
</>
);
}
}
Codesandbox链接:https://codesandbox.io/s/wizardly-cray-44mri
这是一个关于IT技术的链接,可以访问并了解更多相关信息。请点击以上链接以进入链接页面。