实现案例

  1. <body  data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
  2. <div id='menu_wrap'>
  3.     <div class='menu'>
  4.          <nav class="navbar navbar-default" role="navigation">
  5.          <div class="container">
  6.             <div class="navbar-header">
  7.             <a class="navbar-brand" href="#"  style="font-weight:bold">植被数据录入</a>
  8.             </div>
  9.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  10.             <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">&times;</span></button> -->
  11.                     <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button>
  12.                     <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">取消</span></button>
  13.             </div>
  14.         </div>
  15.         </nav>
  16.     </div>
  17. </div>
  18. </body>

css控制样式

  1. .menu{
  2.     width:100%;
  3.     z-index:;
  4. }
  5. .menuFixed{
  6.     position:fixed;
  7.     top:;
  8.     left:;
  9. }
  10. #menu_wrap{
  11.     height:50px;
  12.     width:100%;
  13. }

js监听

  1.     <script>
  2.         $(window).scroll(function () {
  3.             var menu_top = $('#menu_wrap').offset().top;
  4.             if ($(window).scrollTop() >= menu_top) {
  5.                 $('.menu').addClass('menuFixed')
  6.             }
  7.             else {
  8.                 $('.menu').removeClass('menuFixed')
  9.             }
  10.         });
  11.     </script>

导入js

  1.     <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
  2.     <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

bootstrap-监听滚动实现头部跟随滚动的更多相关文章

  1. Scrollview总结：滑动问题、监听Scrollview实现头部局改变

    ScrollView就是一个可以滚动的View,这个滚动的方向是垂直方向的,而HorizontalScrollView则是一个水平方向的可以滚动的View. ScrollView的简单介绍 Scrol ...

  2. Bootstrap-Plugin：滚动监听（Scrollspy）插件

    ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...

  3. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  4. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  5. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  6. vue 中判断向上滚动还是向下滚动

    <script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scr ...

  7. 滚动监听（bootstrap）

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  8. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  9. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

随机推荐

  1. Windows程序设计_19_测试Windows应用程序加载函数

    /* 本程序测试自定义的WinMainCRTStartup函数 */ #define STRICT #define WIN32_LEAN_AND_MEAN #include <windows.h ...

  2. Hibernate4.2.4入门(二)——一对多的映射关系

    一.前言 前面我们已经学过hibernate的基础,学会增删改查简单的操作,然而我们数据库中存在着1对多,多对1,多对多的关系,hibernate又是基于ORM基础上的开源框架,可以让我们不用去编写S ...

  3. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  4. centos 域名硬解析(linux)

    centos做硬解析跟Windows一样修改一个文件. 具体文件为:/etc/hosts.修改命令: vi /etc/hosts 格式个Windows也一样的.

  5. [deviceone开发]-底部弹出选择

    一.简介 个人上传的第一个示例源码,两天空闲时间写的,一点简单组件,写的挺乱还没啥注释,仅供新手学习. 底部弹出选择,可滑动选择选项,如果停留在选项中间,可自动校正位置,加了一点简单的动画效果,需要的 ...

  6. 开启基本数据结构和算法之路--初识Graphviz

    在我的Linux刀耕开荒阶段,就想开始重拾C,利用C实现常用的基本数据结构和算法,而数据结构和算法的掌握的熟练程度正是程序的初学者与职业程序员的分水岭. 那么怎么开启这一段历程呢? 按照软件工程的思想 ...

  7. ORA-00494: enqueue [CF] held for too long (more than 900 seconds) by 'inst 1, osid 5166'

    凌晨收到同事电话,反馈应用程序访问Oracle数据库时报错,当时现场现象确认: 1. 应用程序访问不了数据库,使用SQL Developer测试发现访问不了数据库.报ORA-12570 TNS:pac ...

  8. lucky 的 时光助理

    2017年的lucky小姐,厌倦了现在的工作,她觉得这些的工作对于她而言不具备挑战性,她在迷茫春节过后该如何选择, 这里是距她走出校门整整一年的时光. lucky小姐从开发走向了实施,目的是想周游这个 ...

  9. 一道关于java序列化的问题，看大家知多少————

    问题先放在这里,稍后我会做出解答 已知类有Test和Test2,问两次主程序的输出结果是多少(SerializeUtil只是序列化的工具类) 类Test public class Test imple ...

  10. SQL Server附加数据库报错：无法打开物理文件,操作系统错误5

    问题描述:      附加数据时,提示无法打开物理文件,操作系统错误5.如下图: 问题原因:可能是文件访问权限方面的问题. 解决方案:找到数据库的mdf和ldf文件,赋予权限即可.如下图: 找到mdf ...