bootstrap滚动监视原理实现

最近在公司实习，刚好写了一个静态的网页，用到了滚动监视，就自己写了个监视，话不多说直接进入正题

 $(function () {
     var $root = $("html,body");
     var location = [];//存储item active属性状态 true表示有class="active"
     location["position_1"] = false;
     location["position_2"] = false;
     location["position_3"] = false;
     location["position_4"] = false;
     location["position_5"] = false;
     location["position_6"] = false;
     location["position_7"] = false;
     var offset1,offset2,offset3,
         offset4,offset5,offset6,offset7; //各个锚点的距离顶部的偏移
     offset1 = $("[name = position_1]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset2 = $("[name = position_2]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset3 = $("[name = position_3]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset4 = $("[name = position_4]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset5 = $("[name = position_5]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset6 = $("[name = position_6]").offset().top - 2 * parseInt($(".header_top").css("height").toString().split("px")[0]);
     offset7 = offset6 + parseInt($("#section_6").css("height").toString().split("px")[0]) / 2;//最后部分高度不够，不能按部就班，否则滚动条到不到指定位置就倒底了
     function initi () {
         for(var i in location)
             location[i] = false;
     }
     // debugger;
     $(window).scroll(function () {
         // debugger;
         var Scroll = $(document).scrollTop();
         $("[class = 'active']").removeAttr("class");
         if(Scroll < offset2 && Scroll >= offset1) {
             initi();
             $("[href =#position_1]").parent().attr("class", "active");
             location["position_1"] = true;
         }
         else if(Scroll < offset3 && Scroll >= offset2) {
             initi();
             $("[href =#position_2]").parent().attr("class","active");
             location["position_2"] = true;
         }
         else if(Scroll < offset4 && Scroll >= offset3){
             initi();
             $("[href =#position_3]").parent().attr("class","active");
             location["position_3"] = true;
         }
         else if(Scroll < offset5 && Scroll >= offset4) {
             initi();
             $("[href =#position_4]").parent().attr("class", "active");
             location["position_4"] = true;
         }
         else if(Scroll < offset6 && Scroll >= offset5) {
             initi();
             $("[href =#position_5]").parent().attr("class", "active");
             location["position_5"] = true;
         }
         else if(Scroll < offset7 && Scroll >= offset6){
             initi();
             $("[href =#position_6]").parent().attr("class", "active");
             location["position_6"] = true;
         }
         else
         {
             initi();
             $("[href =#position_7]").parent().attr("class", "active");
             location["position_7"] = true;
         }
     });
     $("a").on("click",function (e) {
         var event = e || window.event;
         var son = $(event.target);
         var father = son.parent();
         var Name = father.prop("tagName");
         if(Name == "LI") {
             var act = $("[class ='active']").children("a").attr("href").toString().split("#")[1];
             location[act] = false;
             $("[class ='active']").removeAttr("class");
             var pos = son.attr("href").toString().split("#")[1];
             location[pos] = true;
             $root.animate({
                 scrollTop: $("[name=\"" + pos + "\"]").offset().top
             }, 1000);
             father.attr("class", "active");
             return false;
         }
         else if(Name == "A")
         {
             var flag = false,pri,real,next,total = 0;
             var temp,num_next = 0,num_pri = 0;
             for(var i in location)
             {
                 if(location[i])
                 {
                     flag = true;
                     break;
                 }
             }
             if(flag == false) {
                 location["position_1"] = true;
                 window.location.href = "#position_1";
             }
             for (i in location) {
                 total++;
                 if (location[i]) {
                     temp = i.split("_");
                     num_next = parseInt(temp[1]) + 1;
                     num_pri = parseInt(temp[1]) - 1;
                     if(total == 1)
                     {
                         pri = real = i;
                         next = temp[0] + "_" + num_next;
                     }
                     else if(total == 7)
                     {
                         next = real = i;
                         pri = temp[0] + "_" + num_pri;
                     }
                     else
                     {
                         next = temp[0] + "_" + num_next;
                         real = i;
                         pri = temp[0] + "_" + num_pri;
                     }
                     break;
                 }
             }
             if(son.hasClass("prev"))
             {
                 location[real] = false;
                 location[pri] = true;
                 $root.animate({
                     scrollTop: $("[name=\"" + pri + "\"]").offset().top
                 }, 1000);
                 $("[class ='active']").removeAttr("class");
                 $("[href=\"#" + pri + "\"]").parent().attr("class","active");
                 return false;
             }
             else if(son.hasClass("next"))
             {
                 location[real] = false;
                 location[next] = true;
                 $root.animate({
                     scrollTop: $("[name=\"" + next + "\"]").offset().top
                 }, 1000);
                 $("[class='active']").removeAttr("class");
                 $("[href=\"#" + next + "\"]").parent().attr("class","active");
                 return false;
             }
             else
                 return false;

         }
     });
 });

在实习的时候做页面出现的几个问题

1.图片自适应浏览器窗口完全显示

• 查看图片的长宽 设置所在图片div的padding-top为高/宽 比如，一张图片是 2000*1333 那么设置所在div padding-top:66.65%;
• 在div里面放空的block标签强行撑开 然后在div中设置background: url("../picture/bg.jpg") no-repeat;background-size: cover;

2.滚动监视的时候发生的锚点偏移问题，过了锚点，还没触发了事件

　　这种情况是因为头部设置了一个固定位置的div，从而导致这个div就不占空间了，他下面的元素就填充他的位置

解决不占空间的方法：1.设置margin-top 2.设置一个空div

解决锚点偏移的方法：设置暗锚来填充形成的固定位置的div

 <div id="section_2" class="container">
         <a name="position_2" class="target-fix"></a>
         <h1>信息15-1</h1><br/><br/><br/>
         <p>To be or not to be,that's a question.<br/><br/>
            决心不过是记忆的奴隶 它会根据你的记忆随意更改(When sorrows come, they come not single spies, - but in battalions.)<br/><br/>
         </p>
     </div>

 .target-fix
 {
     display: block;
     position: relative;
     top: -65px;
 }

比如说我的固定位置的div高度是65px，那么我这个暗锚就上移65px，然后我就只用跳转到这个锚点位置就行<li><a href="#position_2">信息15-1</a></li>

原理：虽然元素被fixed在最上面了，可是页面计算section_2的页边距报读的时候还是把fixed的高度算上去了，所以点击锚点链接的时候，偏移的距离是section_2页边距的高度加上fixed的高度( section_2.offset().top + nav.height)所以设置暗锚向上偏移65px;

因为写的是静态页面 写的很随意把页面写死了 css文件里出现的多余的样式是因为我直接把实习的工程文件截取抽过来，所以代码就很难看了~~~~~~想要看看效果的就自行查看百度云链接：https://pan.baidu.com/s/1kWDK8rP 密码：6de2