滚动监听(1)

<!DOCTYPE HTML>
<html>
 <head>
  <title>导航定位</title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

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

   <style type="text/css">
      * {
         margin:0px;
         padding:0px;
         font-family:‘微软雅黑‘;
      }
      div {
         height:400px;
         border:1px solid red;
         width:600px;
      }
      ul {
         overflow:hidden;
         position:fixed;
         top:300px;
         left:650px;
      }
      li {
         width:40px;
         height:40px;
         background:#3F883E;
         text-align:center;
         line-height:40px;
         color: rgb(0,255,0);
         ,font-size:18px;
         cursor:pointer;
         border-bottom:1px solid #fff;
      }
      li.active {
         width: 38px;
         height: 38px;
         margin-bottom: 1px;
         border: 1px solid #3F883E;
         background: #fff;
         color: rgb(255,0,0);
      }
   </style>

 <body>

   <div class="div1">段落1</div>

   <div class="div2">段落2</div>

   <div class="div3">段落3</div>

   <div class="div4">段落4</div>

   <div class="div5">段落5</div>

   <div class="div6">段落6</div>

   <div class="div7">段落7</div>

   <ul>
      <li class="li1 active">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
      <li class="li4">4</li>
      <li class="li5">5</li>
      <li class="li6">6</li>
      <li class="li7">7</li>
   </ul>

   <script type="text/javascript">
      // 匹配元素的左上角相对文档左上角的偏移
      var arrOffsetTop = [
         $(‘.div1‘).offset().top,
         $(‘.div2‘).offset().top,
         $(‘.div3‘).offset().top,
         $(‘.div4‘).offset().top,
         $(‘.div5‘).offset().top,
         $(‘.div6‘).offset().top,
         $(‘.div7‘).offset().top
      ];

      var fTotalHgt = 0;
      for(var i=0; i<$(‘div‘).length; i++) {
         //返回匹配元素的外部高度,包含padding和border,不包含margin
         fTotalHgt += $(‘div‘).eq(i).outerHeight();
      }
      //平均高度,用于调整滚动
      var fAverageHgt = parseFloat(fTotalHgt / $(‘div‘).length);

      // 滚动事件(每次滚动都做一次循环判断)
      $(window).scroll(function() {
         for(var i=0; i<$(‘div‘).length; i++) {
            //页面滚动条的位置
            if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 减去一个固定值,是定位准确点
               $(‘ul li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘);
            }
         }
      });

      /* 点击事件 */
      $(‘ul li‘).click(function() {
         $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
         //在500ms之内,将body的滚动条滚动到指定位置
         $(‘body, html‘).animate({scrollTop: arrOffsetTop[$(this).index()]}, 500);
      });
   </script>

 </body>
</html>
时间: 2024-11-06 14:29:19

滚动监听(1)的相关文章

滚动监听(bootstrap)

1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com

Bootstrap入门(二十六)JS插件3:滚动监听

很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这将是该元素<body>).然后添加data-target任何引导的父元素的ID或类属性.nav的组件. 我们来写一个基本的实例 先引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我

滚动监听

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的.如下所示,滚动导航条下面的区域并关注导航项的变化.下拉菜单中的条目也会自动高亮显示. 用法 依赖 Bootstrap 的导航组件 滚动监听插件依赖 Bootstrap 的导航组件 用于高亮显示当前激活的链接. body { position: relative; } 通过 data 属性调用 <body data-spy="scroll" data-target=".navbar-example">

bootstrap滚动监听

Bootstrap ScrollSpy(滚动监听)是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容 官方说的想要利用此功能需要引入以下文件: bootstrap/css/bootstrap.css    jquery.1.9.1.js    bootstrap.js    bootstrap-dropdown.js    bootstrap-scrollspy.js 不过经过测试 只需要前三个即可 以下是我测试的代码: <!DOCTYP

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

滚动监听: bootstrap 的scrollspy

滚动监听 bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加 .active类.本身导航没有position:fixed,需要自己加入 滚动监听.只有滚动和监听,只有默认锚点链接做调转,若想改变,只有自己写跳转方法-- 阻止a标签跳转(不直接用锚点链接做跳转):而是用animate(scrollTop)跳转,scrollTop可以设置距顶端的距离.animate({scrollTop: }); html <div id="menu"> <d

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

Bootstrap学习js插件篇之滚动监听

1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: [html] view plaincopy <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header&quo

Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

bootstrap的滚动监听

<!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>下拉菜