随着滚动条滚动，导航栏的动画交互

最新推荐文章于 2025-06-06 15:01:58 发布

原创最新推荐文章于 2025-06-06 15:01:58 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #交互 #导航随滚动条 #滚动条滚动

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用jQuery监听滚动条变化，动态调整导航栏样式，实现透明到实色的平滑过渡效果，并解析CSS3动画在其中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以 http://www.alloyteam.com/ 为例子我来给大家做出详细解答
以下为初始演示
在这里插入图片描述
当滚动条滚动样式如下

下面我就教你如何实现这个样式

这是这个网站导航条的样式它并没有设置背景颜色，只是因为固定定位，导航条在网页不占空间，使得它悬浮在下面轮播图的上方，所以给人视觉一种透明效果；

接下来就是监测滚动条，你会发现滚动条滚动就会在原来的基础上新加了个类 header-scrolled

而这个类的样式如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181126104748388.png
给设置了背景色白色，而且padding值也改变了，注意看之前.header 的样式，是设置了这个-webkit-transition: all .4s ease-in-out；CSS3动画的，所以在padding改变时候会有动画过度；

$(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        // 获取滚动的高度
        var scrollHeight=$(window).scrollTop();
        if(scrollHeight > 0){
            $("header").addClass("header-scrolled");
        }
        if(scrollHeight == 0){
            $("header").removeClass("header-scrolled");
        }
});

只是监测滚动条，增加删除header-scrolled类，而动画过度是header写了CSS3动画样式，由于新增header-scrolled加了背景色和改变的padding值，出现的对应的效果