实现案例

<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. Entity Framework 数据库初始化的三种方法

    在数据库初始化产生时进行控制,有三个方法可以控制数据库初始化时的行为.分别为CreateDatabaseIfNotExists.DropCreateDatabaseIfModelChanges.Dro ...

  2. 全球首个实战类微信小程序开发教程

    小木学堂专注于企业实战开发和经验传授,所以微信小程序诞生这么大的事怎么能不带着大家一起学习学习呢,所以小木学堂讲师连夜赶工学习并实战开发了微信小应用的第一个程序,并录制了课程现免费分享给大家.这个速度 ...

  3. C# Session添加、删除封装类

    /// <summary> /// <para> </para> /// 常用工具类——Session操作类 /// <para> ---------- ...

  4. 客户关系管理系统-CRM源码

    QQ:2112326142   邮箱:jxsupport@qq.com 本公司开发的CRM源代码系统一份,附源代码,本公司产品唯一销售客服QQ号:2112326142  请联系此QQ号,以免给您的工作 ...

  5. Android Weekly Notes Issue #218

    Android Weekly Issue #218 August 14th, 2016 http://androidweekly.net/issues/issue-218 ARTICLES & ...

  6. Titanium.UI.createAlertDialog

    学习TI 记录一下 1.确认对话框 Js代码 var a = Titanium.UI.createAlertDialog({ title:'添加人员信息', message:"人员添加成功& ...

  7. 【转】你所不知道的HTML <head/> 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  8. 开窗函数 First_Value 和 Last_Value

    在Sql server 2012里面,开窗函数丰富了许多,其中带出了2个新的函数 First_Value 和 Last Value .现在来介绍一下这2个函数的应用场景. 首先分析一下First_Va ...

  9. Windows Server 2012 虚拟化实战：网络（一）

    虚拟化对于计算的抽象,大家可能相对熟悉,也许都有在单机使用诸如Virtual PC或者Virtual Box的经验.使用的这些虚拟化软件的第一印象就是我们的CPU可以同时运行多套不同的操作系统,并且其 ...

  10. war 文件打包技巧

    1.首先是工具比如Eclipse很方便了. 2.用winrar之类的工具,把web-info目录,及跟它同级的所有目录及文件,打包成 zip文件就行了,然后把扩展名改成war! 3 Jar命令: 假定 ...