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

原创 2015年11月19日 23:14:46

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android WebView 滚动方向判断同时底部导航栏隐藏或显示(动画效果)

虽然现在手机屏幕越来越大,但一个简洁的界面也受很都app所追求。今天的案例是:ScrollView 或WebView 下拉滚动时隐藏底部导航栏让整个app界面更清爽简洁 其中用到的技术也只是监听屏幕...

jquer滚动隐藏显示顶部导航栏

  • 2014年06月18日 10:08
  • 15KB
  • 下载

鼠标滚动事件,侧边导航js效果

/* ====================== 侧边滑动小导航交互 ====================== */ var sidenav = $(".sidenav"); var siden...

如何用jQuery实现在鼠标滚动后导航栏保持固定

要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: 首页 关于我们 ...
  • bboyjoe
  • bboyjoe
  • 2015年06月30日 16:45
  • 5480

tableView滚动时(渐变)隐藏显示导航栏

//添加头部-(void)createHeadImageView{ UIImage *image =[UIImage imageNamed:@"组-5"]; headImag...

JS手风琴导航栏效果

  • 2014年09月02日 18:26
  • 927B
  • 下载

一个简单的左侧导航栏滚动时悬浮效果

最近在做一个小项目的时候,遇到一个需要有左侧导航栏悬浮的效果,着实难为了一下,效果不难,只怪自己掌握的东西太少,后来经过努力,最终用一种比较粗糙的方式得以解决,实现的并不是太完美,但最终还是实现了,可...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:headroom.js 用例,漂亮完善的 鼠标滚动 --->导航栏隐藏显示效果
举报原因:
原因补充:

(最多只允许输入30个字)