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>

滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

$(function () { //绑定滚动条事件 $(window).bind("scroll", function () {...
  • lybwwp
  • lybwwp
  • 2014年10月25日 10:16
  • 20549

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

headroom.js 用例 网页的导航,鼠标向下滚动 导航栏隐藏,向上滚动 导航栏 显示出来。 非常完善的 触摸屏支持。...
  • qinyou1994
  • qinyou1994
  • 2015年11月19日 23:14
  • 870

纯css,div隐藏滚动条,保留鼠标滚动效果。

隐藏div滚动条,但是保留滚动功能。
  • liusaint1992
  • liusaint1992
  • 2016年04月28日 21:46
  • 41015

学习笔记一、UITableView上下滚动导航栏渐变隐藏和显示效果

大体思路:定义一个UINavigationBar的Category,在NavigationBar顶层增加一个视图overlay。滚动时通过设置overlay视图的背景色和透明度来达到隐藏和显示导航栏效...
  • kerran
  • kerran
  • 2015年05月05日 11:30
  • 1000

向下滚动隐藏导航栏,向上滚动显示

Document body{ margin:0; padding: 0; height: 3000px; } #fix_nav{background-color: #ccc;} .n...
  • CrazBarry
  • CrazBarry
  • 2017年07月06日 13:54
  • 989

随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示

  • 2015年09月15日 10:58
  • 86KB
  • 下载

Bootstrap3 表格-鼠标悬停

通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。 ... —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~ —–乐于分享,共同进步! —–...
  • duruiqi_fx
  • duruiqi_fx
  • 2016年11月25日 10:28
  • 10385

jquery实现随着鼠标滚动固定导航栏

下面是简单的导航栏固定效果。。感觉代码很少,write less Do more.也算是jquery比较方便的原因。 下面代码仅供参考 页面滚动事件 ...
  • yy211zhu
  • yy211zhu
  • 2016年07月07日 14:09
  • 2013

鼠标在导航栏移入移出的隐藏显示效果jquery

我的账号| 这里是一些开始被隐藏鼠标经过就出现的文字                 首先注意设置定位方式 父类.account{position:relative;} 子...
  • qq_33769914
  • qq_33769914
  • 2016年07月15日 15:14
  • 3537

Bootstrap

起步1. Bootstrap 101 Template
  • m0_37643611
  • m0_37643611
  • 2017年04月01日 17:06
  • 497
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:headroom.js 用例,漂亮完善的 鼠标滚动 --->导航栏隐藏显示效果
举报原因:
原因补充:

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