javascript - 粘性标题在出现时动画但在消失时不动画
问题描述
编辑:这是我的沙箱https://codesandbox.io/s/nostalgic-morning-3f09m?file=/src/App.tsx
因此,我在 React/Gatsby 上制作了一个粘性标题,它应该在屏幕滚动 Y >= 420 时出现。一旦它达到 420 像素,它会显示一个很好的动画,将标题向下滑动。但是,当我向上滚动屏幕时,粘性标题会以一种非常冷酷的方式“消失”。这个想法是它也会“滑动”起来,然后以相反的方式消失。我想要实现的一个示例-> https://www.pretto.fr/ 我正是想要这个,标题在它下降时滑动,但当我向上滚动时,它向上滚动消失。
不同之处在于,在这个网站中,粘性标题和“主”标题似乎是两个不同的组件。在我的网站上,它们只是一个,我只是使用道具让它position: relative;
从position: sticky;
我的标题:
function Header(props: HeaderProps): React.ReactElement {
const [sticky, setSticky] = useState(false)
useEffect(() => {
document.addEventListener('scroll', trackScroll)
return () => {
document.removeEventListener('scroll', trackScroll)
}
}, [])
const trackScroll = () => {
if (typeof window == 'undefined') {
return
} else {
setSticky(window.scrollY >= 420)
}
}
return (
<Container id="container" sticky={sticky} className={`${sticky ? 'sticky' : ''}`}>
...
还有我的 styled-components 样式...
const smoothScroll = keyframes`
0% { transform: translateY(-100%); }
100% { transform: translateY(0px); }
`
const Container = styled.div<{ sticky?: boolean }>`
display: flex;
justify-content: space-between;
margin: auto;
padding: 0 6rem;
width: 100%;
position: ${props => (props.sticky ? 'sticky' : 'relative')};
top: 0px;
height: 97px;
align-items: center;
z-index: 3;
background: ${props => (props.sticky ? 'white' : 'inherit')};
&.sticky {
animation: ${smoothScroll} 500ms;
}
`
因此,一旦我向下滚动到 420 像素,漂亮的“向下滑动”动画就会起作用。但是一旦我向上滚动它就会消失而不是“向上滑动”。关于如何实现这一目标的任何想法?
解决方案
仅当将“粘性”类添加到元素而不是删除时,动画才会触发。一种可能的解决方案是跟踪向上滚动事件并添加另一个具有“向上滑动”动画的类,其中包含反转样式 -一般概念
推荐阅读
- python - Keras Concatenate:“Nonetype”对象不可下标
- python - Python - 如何重塑两个向量并将其转换为元组?
- java - 如何有效地从 hdfs 读取 n 个文件夹并使用 Spark 在 hbase 中写回
- entity - Sulu:如何查询自定义实体类型?
- ios - iOS Swift如何从json响应中获取任何键的值
- python - 在 jupyter notebook 中使用 tensorflow 加载数据时出现警告
- networking - 带宽对 lorawan 范围有什么影响?
- r - 如何在 R 中实现拒绝抽样?
- excel - 当某些单元格是VBA中的某个数字时如何不打印工作表(while循环)
- python - Heroku Procfile 与多个工人