当前位置: 首页 > >

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

以 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值,出现的对应的效果



友情链接: year2525网 工作范文网 QS-ISP 138资料网 528200 工作范文网 baothai 表格模版