jQuery实现视窗上、下滚动导航隐藏、出现【二】

jQuery实现视窗上、下滚动导航隐藏、出现【二】

这里的导航栏隐藏和出现我们用的是Headroom.js插件。

Headroom.js是一个轻量级、高性能的JS小工具(不依赖不论什么工具库。)，它能在页面滚动时做出响应。

此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。

Headroom.js有什么用？

1、固定页头(导航条)能够方便用户在各个页面之间切换。可是这也会带来些问题…

2、大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些.固定页头会占用一部分本来能够用于展示内容的区域。

3、小屏幕通常是高度较大,可是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。

4、Headroom.js 能帮你把不须要的页面元素在合适的时间展示出来,让用户花很多其它时间关注你页面上的内容。

Headroom.js怎样使用

1、首先须要引用headroom.js https://www.bootcss.com/p/headroom.js/

2、通过css的trasition属性达到变换效果。加入例如以下CSS：

.my-animated {
  -webkit-animation-duration: .5s;   /*表示动画执行的时间*/
  -webkit-animation-fill-mode: both; /*规定动画在播放前和之后其动画效果是否可见*/
  animation-fill-mode: both
}
 .my-slideDown {
  -webkit-animation-name: my-slideDown;   /*规定需要绑定到选择器的 keyframe 名称。。*/
  animation-name: my-slideDown
}
.my-slideUp {
  -webkit-animation-name: my-slideUp;
  animation-name: my-slideUp
}
@-webkit-keyframes my-slideUp {
  0% {
    transform: perspective(100px) rotateX(0deg);
    //-webkit-transform: translateY(0);
  }

  100% {
    transform: perspective(100px) rotateX(-90deg);
    //-webkit-transform: translateY(-250%);
  }
}
@-webkit-keyframes my-slideDown {       /*表示匀速地执行动画*/
  0% {
    transform: perspective(100px) rotateX(-90deg);
    //-webkit-transform: translateY(-250%);
  }

  100% {
    transform: perspective(100px) rotateX(0deg);
    //-webkit-transform: translateY(0);
  }
}

3、之后加入以下的js代码，获取导航栏".header-bottom"，并为它添加动画效果，动画效果可根据自己喜欢来定制。

    function Animated(){
        let headerBottom = document.querySelector(".header-bottom");
        let headroom =  new Headroom(headerBottom, {
            //下面是自定义的类名
            classes: {
                initial: "my-animated",  // 当元素初始化后所设置的class
                pinned: "my-slideDown", // 向上滚动时设置的class
                unpinned: "my-slideUp" // 向下滚动时所设置的class
            }
        });
        headroom.init();
    }
    Animated();