Jquery+CSS轻松实现导航动态显示隐藏(免插件)

除了通过Headroom.js小插件实现顶部固定导航的动态显示与隐藏外,我们通过CSS样式配合Jquery的scroll()方法监听滑动事件方法同样可以轻松实现我们想要的展现效果,一起看看吧

Jquery+CSS轻松实现导航动态显示隐藏(免插件)

所属分类: WEB
专题标签: Jquery CSS 导航栏

导航动态显示隐藏

通过Headroom.js小插件轻松实现导航动态显示隐藏一文中提到使用Headroom.js小插件实现动态显示隐藏。
但需要自行写一些CSS样式,而实际上如果您理解了CSS的作用之后,就可以无需小插件,依旧几行代码完成相关实现。
实现页面下滑时,固顶导航自动上滑隐藏。
实现页面上滑时,固定导航自动下拉显示。
需求的核心点在于判断页面当前为下滑还是上滑。
此外导航的显示与隐藏不能太过于突兀,采用平滑的动画效果更好。

CSS代码

  1. /*动画样式*/
  2. /*当元素产生变化时,0.6S内完成此变化*/
  3. *{
  4. -webkit-transition:all .6s;
  5. -moz-transition:all .6s;
  6. -ms-transition:all .6s;
  7. -o-transition:all .6s;
  8. /*上面四条为了兼容各个内核的浏览器,实际仅需下方一条样式*/
  9. transition:all .6s;
  10. }
  11. /*固顶导航样式*/
  12. /*这个样式在Headroom.js小插件一文中也用到了*/
  13. header{
  14. height: 60px;
  15. width: 100%;
  16. background:#2c4762;
  17. position:fixed;
  18. /*顶部距离*/
  19. top: 0;
  20. }
  21. /*下滑触发追加的CSS*/
  22. /*追加此样式时,导航在0.6S时间内从顶部上滑至-60px负距离*/
  23. .down{
  24. /*顶部负距离,一般和导航高度一致*/
  25. top:-60px;
  26. }

JS代码

  1. $(function(){
  2. //记录顶部距离
  3. var windowTop=0;
  4. //触发页面滑动时会进入此方法
  5. $(window).scroll(function(){
  6. //获取当前可视区域距离页面顶端的距离
  7. var scrolls = $(this).scrollTop();
  8. //当scrolls>windowTop时,表示页面在向下滑动
  9. if(scrolls>=windowTop){
  10. //追加样式并记录新的距离
  11. $("#header").addClass("down");
  12. windowTop=scrolls;
  13. }else{
  14. $("#header").removeClass("down");
  15. windowTop=scrolls;
  16. }
  17. });
  18. });

结尾小结

本文的.scroll()方法是Jquery库提供,$(window).scroll()主要监听浏览器窗口滑动事件,对于已经引用过Jquery的小伙伴,完全不需要再使用插件,几行代码就能够完成。
当然原生JS也可以绑定监听浏览器窗口滑动事件。
Jquery的scroll()方法还可以做更多的延伸,更多的提升用户的体验度的实现。