实现案例

<body  data-spy="scroll" data-target="#bs-example-navbar-collapse-1">

<div id='menu_wrap'>

    <div class='menu'>

         <nav class="navbar navbar-default" role="navigation">

         <div class="container">

            <div class="navbar-header">

            <a class="navbar-brand" href="#"  style="font-weight:bold">植被数据录入</a>

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">&times;</span></button> -->

                    <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>

                    <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>

            </div>

        </div>

        </nav>

    </div>

</div>

</body>

css控制样式

.menu{

    width:100%;

    z-index:;

}

.menuFixed{

    position:fixed;

    top:;

    left:;

}

#menu_wrap{

    height:50px;

    width:100%;

}

js监听

    <script>

        $(window).scroll(function () {

            var menu_top = $('#menu_wrap').offset().top;

            if ($(window).scrollTop() >= menu_top) {

                $('.menu').addClass('menuFixed')

            }

            else {

                $('.menu').removeClass('menuFixed')

            }

        });

    </script>

导入js

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

    <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. Eclipse中使用Gradle构建Java Web项目

    Gradle是一种自动化建构工具,使用DSL来声明项目设置.通过Gradle,可以对项目的依赖进行配置,并且自动下载所依赖的文件,使得构建项目的效率大大提高. 1. 安装Gradle 下载Gradle ...

  2. querystring模块

    querystring处理参数的小利器. 下面是querystring的四个方法.   ①stringify:将一个参数对象序列化为一个字符串 eg: querystring.stringify({n ...

  3. Spring+SpringMVC+Hibernate简单整合（转）

    SpringMVC又一个漂亮的web框架,他与Struts2并驾齐驱,Struts出世早而占据了一定优势,下面同样做一个简单的应用实例,介绍SpringMVC的基本用法,接下来的博客也将梳理一下Str ...

  4. php实现设计模式之 状态模式

    <?php /*状态模式:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类.(行为模式) * * 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做 ...

  5. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

  6. node.js xtemplate的使用实例

    工程下安装XTemplate并使用它的方法实例说明: 1.安装xtpl npm install xtpl xtemplate --save 2.在views目录添加test.xtpl文件,其内容为 t ...

  7. Markdown学习

    1. Markdown介绍 Markdown是一种轻量级的标记语言,它语法简单并且易读易用.Mardown文件通常以.md后缀结尾. 2. Markdown优点 纯文本格式,兼容性极强,可以用任意文本 ...

  8. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

  9. plist文件、NSUserDefault 对文件进行存储的类、json格式解析

    ========================== 文件操作 ========================== Δ一 .plist文件 .plist文件是一个属性字典数组的一个文件: .plis ...

  10. MongoDB学习笔记一—简介

    MongoDB简介 MongoDB在功能和复杂性之间取得了很好的平衡,并且大大简化了原先十分复杂的任务,它具备支撑今天主流web应用的关键功能:索引.复制.分片.丰富的查询语法,特别灵活的数据模型.与 ...