headroom.js 用例,漂亮完善的 鼠标滚动 --->导航栏隐藏显示效果

准备工作:
1 首先引入bootstrap.css 文件
2 body 标签之前 引入

  • jquery.js
  • headroom.js
  • jQuery.headroom.js

    用到的css 样式:

<style>
  .headroom {
    position:fixed;
    top:0;
    left:0;
    right:0
    transition:all .2s ease-in-out
  }
  .headroom--unpinned {
    top:-100px;
  }
  .headroom--pinned {
    top: 0;
  }
  .scrollspy-example {
    height: 1200px;
    overflow: auto;
    position: relative;
  } 
<style>

.scrollspy-example 只是测试使用的页面主体样式,前三个样式是必须有的,但在页面中不用手动添加给任何的 标签,下面的 jquery 函数 帮我们判断 添加,从而实现了 鼠标向下滚动导航栏隐藏,向上滚动 导航栏显示的效果。

<script type="text/javascript">
    // 导航栏添加bootstrap 的 .navbar-fixed-top 样式
    $(".navbar-fixed-top").headroom();
 </script>
阅读更多
个人分类: 网页
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭