1、本代码适用于 bootstrap V3 的 页面滚动监听

2、效果：

3、代码：

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <title>XXXXX</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <link rel="stylesheet" href="css/m.css" />

<style>

    ul{padding: 0; margin: 0;}

    li{list-style: none;}

    .content-txt{padding:20px; color: #666;}

    .content-absolute{position: absolute; top: 220px;}

    .content-txt h2{height: 50px; line-height: 50px; border-bottom: 1px solid #e6e6e6; font-size: 20px; text-align: center; color: #666;}

    .content-txt p{padding: 5px 0; color: #666; line-height: 24px;}

    .day-bg{height: 30px;padding: 0 28px 0 18px;background: #ffb90f url(images/sj.gif) right 0  no-repeat; display: inline-block; line-height: 30px;border-radius: 2px 0 0 2px;color: #fff; font-size: 16px;}

    .cfd dt{font-size: 20px; line-height: 70px;}

    .cfd dd{line-height: 36px; background-color: #f5f5f5; font-size: 14px; padding: 10px 20px;}

    .jt-ico,.zs-ico,.yc-ico{background-image: url(images/icon3.png); width: 21px; height: 19px; display: inline-block; vertical-align: middle; margin-right: 10px;}

    .jt-ico{background-position: 0 0;}

    .zs-ico{background-position: 0 -34px;}

    .yc-ico{background-position: 0 -68px;}

    .title-h3{font-size: 20px;line-height: 40px; color: #343434;}

    .b-bottom{border-bottom: 15px solid #f7f7f7; padding-bottom: 20px;}

    .dt-nav{background-color: #fff; padding: 10px; border-bottom: 1px solid #e6e6e6;}

    .dt-nav li{width: 33.333%; float: left;text-align: center;}

    .dt-nav li a{margin: 5px; display: block; padding: 10px 0; background-color: #efeff4; border-radius: 5px; text-decoration: none;}

    .dt-nav .active a,.dt-nav .active a:focus{background-color: #5cacee!important; color: #fff!important;}

    </style>

    </head>

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

  <div class="clearfix header">

      <nav id="navbar-example" class="dt-nav" role="navigation">

          <ul class="nav clearfix">

            <li class="nav"><a href="#scroll1" class="active">产品详情</a></li>

            <li><a href="#scroll2">行程安排</a></li>

            <li><a href="#scroll3">费用说明</a></li>

            <li><a href="#scroll4">注意事项</a></li>

            <li><a href="#scroll5">购物说明</a></li>

            <li><a href="#scroll6">预定须知</a></li>

          </ul>

     </nav>

<div class="content-txt">

      <div data-spy="scroll" data-target="#myScrollspy" data-offset="0"

     style="position: relative;">

            <h2 id="scroll1">产品详情</h2>

            <p class="t2">5月22日，巴东县人民政府与中诚信投资集团签订合作框架协议，总投资约40亿元的绿葱坡滑雪及高山运动度假小镇项目正式落地。</p>

            <h2 id="scroll2">行程安排</h2>

            <h3 class="day-bg">第一天</h3>

            <dl class="cfd">

                <dt>出发地：武汉-恩施</dt>

                <dd>

                    <ul>

                        <li><span class="jt-ico"></span>交通: 动车</li>

                    </ul>

                </dd>

            </dl>

            </div>

            <h2 id="scroll3">费用说明</h2>

            <h3 class="title-h3">费用包含</h3>

            <ul>

                <li>住宿：根据协议，中诚信集团拟在巴东县绿葱坡镇投资建设华中</li>

            </ul>

            <h3 class="title-h3 mt20">费用不包含</h3>

            <ul>

                <li>住宿：根据协议，中诚信集团拟在巴东县绿葱坡镇投资建设华中</li>

            </ul>

            <h2 id="scroll4">注意事项</h2>

            <p class="t2">5月22日，巴东县人民政府与中诚信投资集团签订合作框架协议，总投资约40亿元的绿葱坡滑雪及高山运动度假小镇项目正式落地。</p>

            <h2 id="scroll5">购物说明</h2>

            <p class="t2">5月22日，巴东县人民政府与中诚信投资集团签订合作框架协议，总投资约40亿元的绿葱坡滑雪及高山运动度假小镇项目正式落地。</p>

            <h2 id="scroll6">预定须知</h2>

            <h3 class="title-h3">退改说明</h3>

            <p class="t2">5月22日，巴东县人民政府与中诚信投资集团签订合作框架协议，总投资约40亿元的绿葱坡滑雪及高山运动度假小镇项目正式落地。</p>

        </div>

    </div>    

    </body>

</html>

<script src="js/jquery-2.1.3.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function() {

    var f1 = $(window).scrollTop(),f2 = $(".dt-nav").offset().top;

    $(window).scroll(function() {

        var q = $(window).scrollTop();

        if (q > f2) {

            $(".dt-nav").addClass("navbar-fixed-top")

        } else {

            $(".dt-nav").removeClass("navbar-fixed-top")

        }

    }); 

});

</script>

4、支持 上下滚动，tab自动选中；选中tab，页面自动跳跃到锚点

【bootstrapV3】移动端和PC端的 滚动监听的更多相关文章

  1. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  2. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  3. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  4. 检测当前运行环境——移动端与PC端。

    方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...

  5. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  6. js判断是移动端还是pc端

    运行页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,这样在手机端会有额外的不必要浪费的加载时间 var browser={ versions:function(){ ...

  7. 关于移动端和PC端的交互的区别

    对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...

  8. html与css的移动端与pc端需要注意的事项

    一个移动端与pc端之间最主要的也就是尺寸问题,苹果与安卓的机型尺寸大小相差甚多,一个尺寸都会影响用户的体验.那么我们来了解一下一些常用的解决方法. 一般在网页中都会在头部有一些这样的代码 <me ...

  9. C# 移动端与PC端的数据交互

    小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...

随机推荐

  1. Asp.net WebApi版本控制

    有关web api的版本控制网上有很多,如Web API 版本控制的几种方式 Web API 版本化的介绍 但是具体的code并不多,或者说可以run的demo 不多. 版本控制如果项目一开始还好做关 ...

  2. Populating Next Right Pointers in Each Node II leetcode java

    题目: Follow up for problem "Populating Next Right Pointers in Each Node". What if the given ...

  3. 七牛云存储 qiniu 域名 回收 文件上传 备份 下载 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. Arduino教程：MPU6050的数据获取、分析与处理

    Arduino教程:MPU6050的数据获取.分析与处理 转载 摘要 MPU6050是一种非常流行的空间运动传感器芯片,可以获取器件当前的三个加速度分量和三个旋转角速度.由于其体积小巧,功能强大,精度 ...

  5. 【Spark】SparkStreaming-Tasks-数量如何设置？

    SparkStreaming-Tasks-数量如何设置? sparkstreaming task 数量设置_百度搜索 spark内核揭秘-14-Spark性能优化的10大问题及其解决方案 - star ...

  6. spark 指定相关的参数配置 num-executor executor-memory executor-cores

    num-executors参数说明:该参数用于设置Spark作业总共要用多少个Executor进程来执行.Driver在向YARN集群管理器申请资源时,YARN集群管理器会尽可能按照你的设置来在集群的 ...

  7. xgboost入门与实战

    xgboost入门与实战(实战调参篇) https://blog.csdn.net/sb19931201/article/details/52577592 前言 前面几篇博文都在学习原理知识,是时候上 ...

  8. hadoop2.2.0 centos 编译安装详解

    http://blog.csdn.net/w13770269691/article/details/16883663 废话不讲,直切正题. 搭建环境:Centos x 6.4 64bit 1.安装JD ...

  9. Medline Plus

    提问地址: http://apps2.nlm.nih.gov/medlineplus/contact/index.cfm?lang=en&from=http://www.nlm.nih.gov ...

  10. Linux扩展文件分区

    **************操作之前请看章节6,看系统是否支持LVM分区管理方式*************** 1:新增磁盘 插入新的磁盘,比如物理机可以直接在卡槽插入,虚拟机可以在控制台添加磁盘或者 ...