javascript jquery 仿京东左侧悬浮框效果

原生javascript 仿京东左侧悬浮框效果。

在工作中遇到这样的要求，悬浮在右侧，滚动到特定的位置，显示出来，标记。和京东的悬浮框效果类似，只是位置不同，不多说，先贴代码。

html

 

      

        
xxx
        
xxx
        
xxx
        
xx
        
xxx
        
xx
      
    

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()方法用法总结