实现案例

<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. PHP数组详解

    作为一名C++程序员,在转做PHP开发的过程中,对PHP数组产生了一些混淆,与C++数组有相似的地方,也有一些不同,下面就全面地分析一下PHP的数组及其与C++中相应数据类型的区别和联系. 数组的分类 ...

  2. 配置mac百度云同步盘

    1. 选择同步盘在电脑中的位置,该文件夹中的内容与云端保持一致.默认位置/Users/LemonVerbena/百度云同步盘.电脑同步盘的作用与百度云网盘的主页一样,下面可以包括多个同步文件夹. 2. ...

  3. java代理模式之静态代理

    作为一个初级开发者,可能不会接触到代理模式,但是在很多框架的使用中都不知不觉使用了代理模式,比如servlet的过滤器链,spring的AOP,以及spring mvc的拦截器等.所以了解代理模式对于 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 【代码笔记】iOS-UILable电子表显示

    一,效果图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...

  6. Java实现单链表的各种操作

    Java实现单链表的各种操作 主要内容:1.单链表的基本操作 2.删除重复数据 3.找到倒数第k个元素   4.实现链表的反转   5.从尾到头输出链表 6.找到中间节点 7.检测链表是否有环 8.在 ...

  7. 转：使用 Spring Data JPA 简化 JPA 开发

    从一个简单的 JPA 示例开始 本文主要讲述 Spring Data JPA,但是为了不至于给 JPA 和 Spring 的初学者造成较大的学习曲线,我们首先从 JPA 开始,简单介绍一个 JPA 示 ...

  8. Java web会话简单应用

    Java会话主要分为两块:Cookie和HttpSessionCookie技术:会话数据保存在浏览器客户端.Session技术:会话数据保存在服务器端.一.下面介绍一下Cookie的应用1. Cook ...

  9. iOS系列 基础篇 01 构建HelloWorld，剖析并真机测试

    iOS基础 01 构建HelloWorld,剖析并真机测试 前言: 从控制台输出HelloWorld是我们学习各种语言的第一步,也是我们人生中非常重要的一步. 多年之后,我希望我们仍能怀有学习上进的心 ...

  10. MTU(Maximum transmission unit) 最大传输单元

    最大传输单元(Maximum transmission unit),以太网MTU为1500. 不同网络MTU如下: 如果最大报文数据大小(MSS)超过MTU,则会引起分片操作.   路径MTU: 网路 ...