关闭

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

标签: headroomjsbootstrap编辑器
637人阅读 评论(0) 收藏 举报
分类:

准备工作:
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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4231次
    • 积分:70
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档