css 上滑隐藏动画

CSS上滑隐藏动画是一种在网页设计中非常常见的动画效果。这种效果通常用来隐藏某些元素，比如滚动时的顶部导航条。以下是一个简单的CSS代码演示。

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}
nav.hide {
    transform: translateY(-100%);
}
    

在这个例子中，我们使用了一个nav元素作为顶部导航条。使用position:fixed让它固定在页面顶部，而使用transform:translateY()可以让它在垂直方向上移动。在原始状态下，它位于顶部，transform:translateY(0)没有任何变化。当我们添加类名hide，使用transform:translateY(-100%)把它移到屏幕顶部之外，实现了上滑隐藏动效。

我们可以使用JavaScript来添加或删除类名hide，以便根据滚动事件控制导航条的显示或隐藏。下面是一个基本的JavaScript代码示例：

var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
    if (window.scrollY >
100) {
    nav.classList.add('hide');
}
 else {
    nav.classList.remove('hide');
}
}
    , false);
    

在这个例子中，我们选择了文档中的nav元素，并添加了一个滚动事件监听器。当滚动页面时，我们检查当前垂直滚动的距离。如果大于100像素，我们添加hide类名，如果小于100像素，我们将其删除。这样，当用户滚动页面时，我们就可以控制导航条的显示和隐藏。

总之，CSS上滑隐藏动画是一种非常有用的设计技巧，可以增强用户体验，提高页面美观性。使用上述CSS和JavaScript代码示例，你也可以轻松实现这种效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！