css固定滑动到100px消失

CSS是我们页面美化中的一大利器，它能够帮助我们实现各式各样的效果，其中固定滑动并在一定位置消失是一种比较常见的效果。下面我们来看一下如何利用CSS实现固定滑动到100px消失的效果。

/* 设置导航栏默认样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    transition: transform 0.5s ease;
}

/* 鼠标滚动时隐藏导航栏 */
.navbar-hidden {
    transform: translateY(-100px);
}

上述代码中，我们先设置了导航栏的默认样式，其中position属性设置为fixed，将导航栏固定在页面顶部，top、left、right属性设置为0，使导航栏占据整个页面的宽度，height属性设置为100px，将导航栏高度设置为100px。当然，这些属性根据实际需要可以进行相应的调整。

我们接着在.navbar样式中设置了transition属性，在导航栏进行transform变换时，变换时间为0.5s，变换速度为ease。这里我们使用了transform属性来实现导航栏的滑动效果。

接下来，我们利用.navbar-hidden样式来实现导航栏的隐藏效果。当我们向下滚动页面时，可以在JS中监听到滚动事件，并使导航栏添加.navbar-hidden样式，这里我们只需要设置transform: translateY(-100px)，就能让导航栏向上滑动100px，达到消失的效果。

综上所述，利用CSS实现固定滑动到100px消失的效果并不难，只需要掌握好transform属性的用法即可。希望本文能对大家有所帮助。