javascript jquery 仿京東左側懸浮框效果

原生javascript 仿京東左側懸浮框效果。

在工作中遇到這樣的要求，懸浮在右側，滾動到特定的位置，顯示出來，標記。和京東的懸浮框效果類似，只是位置不同，不多說，先貼代碼。

html

 <div class="sroll-box">
      <ul>
        <li class="sroll-li"><a href="#first">xxx</a></li>
        <li class="sroll-li"><a href="#second">xxx</a></li>
        <li class="sroll-li"><a href="#third">xxx</a></li>
        <li class="sroll-li"><a href="#forth">xx</a></li>
        <li class="sroll-li"><a href="#fifth">xxx</a></li>
        <li class="sroll-li"><a href="#sixth">xx</a></li>
      </ul>
    </div>

css

.sroll-box .active {
  background-color: #f24645;
  color: #ffffff;
}

.sroll-box {
  display: none;
  position: fixed;
  right: 10px;
  top: 30%;
  width: 160px;
  text-align: center;
}

.sroll-box li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 5px;
  text-align: center;
}

.sroll-box li:last-child {
  border-bottom: 1px solid #ddd;
}

.sroll-box li a {
  display: block;
  width: 100%;
  height: 100%;
}

.sroll-box .sroll-li:hover {
  background-color: #f24645;
  color: #ffffff;
}

JavaScript

$(function () {

    var arr = [];

    var srollBox = $(".sroll-box .sroll-li");

    for (var i = 0; i < srollBox.length; i++) {
      var scroll_top = $(srollBox.eq(i).find('a').attr("href")).offset().top;

      arr.push(scroll_top);
    }

    $(window).scroll(function () {
      var top = $(window).scrollTop(),
        box = $(".sroll-box"),
        li = $(".sroll-li");

      for (var j = 0; j < arr.length; j++) {

        if (top < Math.min.apply(null, arr) - 100) {
          box.fadeOut(300);
        }

        if (top > Math.min.apply(null, arr) + 100) {
          box.fadeIn(300);
        }

        if (top >= Math.max.apply(null, arr)) {
          li.last().addClass("active").siblings('li').removeClass("active");
        }

        if (top >= arr[j] && top < arr[j + 1]) {
          li.eq(j).addClass("active").siblings('li').removeClass("active");
        }

      }
    });
  })

這裏的javascript寫的可能太沉餘了， 如果有更好的實現方式，歡迎指點。

在這個實現的過程中，主要的難點是計算每個元素距離頂部的高度，用到了scrollTop的方法。然後把數據都放到一個數組中，通過循環來判斷現在滾動的位置落在那兩個區間之間。這裏我沒有找到更好的替代方法，就使用了循環，感覺很low。

在實現中用到了我之前提過的apply方法。具體的可以參考我的另一篇文章javascript中的call()方法和apply()方法用法總結