导航条滚轮上滑出现下滑消失

萌新刚玩导航条，写一篇当做自己的笔记

导航条与滚轮的效果可以依靠headroom.js实现

结合csdn其他博主以下是部分代码

JS部分

var myElement = document.querySelector(".nav");

var headroom = new Headroom(myElement);

headroom.init();

CSS部分

.headroom {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    transition: all .2s ease-in-out;

}

.headroom--unpinned {

    top: -100px;

}

.headroom--pinned {

    top: 0;

}

headroom可以在官网进行下载