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

javascript 同时被 2 个专栏收录
22 篇文章 0 订阅
2 篇文章 0 订阅

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


  • 8
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值