jQuery电梯楼层实现

最新推荐文章于 2022-08-30 12:23:26 发布

牛先森家的牛奶

最新推荐文章于 2022-08-30 12:23:26 发布

阅读量420

点赞数

分类专栏：功能模块汇总 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_42681295/article/details/107686067

版权

功能模块汇总同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏


  实现需求：
     1、当滚动到一定高度，显示和隐藏右边的floor
     2、点击floor 里面的标签 跳到对应显示主页面的内容区域
     3、点击floor 让当前的标签的样式改变，比如背景和颜色，其余不变
     4、滚动页面时 ，让floor里面的标签和主页面对应区域一致

直接上代码。。。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    div {
      height: 600px;
      width: 100%;
      font-size: 80px;
      color: #fff;
      line-height: 600px;
      text-align: center;
    }

    div:nth-child(1) {
      background: pink;
    }

    div:nth-child(2) {
      background: orange;
    }

    div:nth-child(3) {
      background: blue;
    }

    div:nth-child(4) {
      background: red;
    }

    div:nth-child(5) {
      background: skyblue;
    }

    div:nth-child(6) {
      background: gray;
    }

    div:nth-child(7) {
      background: black;
    }

    ul {
      width: 40px;
      background: #fff;
      /* position: absolute; */
      position: fixed;
      right: 20px;
      top: 150px;
      display: none;
    }

    li {
      font-size: 15px;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      border-bottom: 2px solid purple;
    }

    li:last-child {
      border: 0;
    }

    .active {
      color: indianred;
      background: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="header">顶部</div>
  <div class="banner">轮播图</div>
  <div class="product floor">商品分类</div>
  <div class="show floor">潮牌展示</div>
  <div class="moreactive floor">更多活动</div>
  <div class="link floor">名店链接</div>
  <div class="footer">底部</div>
  <ul class="list">
    <li class="active">商品分类</li>
    <li>潮牌展示</li>
    <li>更多活动</li>
    <li>名店链接</li>
    <li class="returnTop">返回顶部</li>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    $(function () {
      // 先获取滚动到第一个需要显示floor的元素的高度
      var first_top = $(".product").offset().top
      // 定义一个变量存状态 或者说是 节流阀  互斥锁 
      var flag = true
      // 封装动画效果函数
      function toggleTool() {
        var scroll_top = $("html,body").scrollTop()
        // console.log(scroll_top)
        if (scroll_top > first_top) {
          $(".list").fadeIn()
        } else {
          $(".list").fadeOut()
        }
      }
      // toggleTool()
      $(document).on("scroll", throttling(function () {
        // 第一种把定位方式改一下
        // var scroll_top = $("html,body").scrollTop()
        // if (scroll_top >= first_top) {
        //   $(".list").css({
        //     position: "fixed",
        //     top: 100
        //   })
        // } else {
        //   $(".list").removeAttr("style")
        // }
        // 第二种是淡入淡出 而定位不用改变
        toggleTool()
        // 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
          $(".floor").each(function (i, ele) {
            if ($(document).scrollTop() >= $(ele).offset().top) {
              // console.log(i)
              $(".list li").eq(i).addClass("active").siblings("li").removeClass("active")
            }
          })
        }
      }, 200))

      // 点击li 跳到当前对应页面元素位置 并让当前li的背景改变其余不变
      $(".list li:lt(4)").on("click", function () {
        // console.log(1)
        flag = false
        // console.log($(this).index())
        var current = $(".floor").eq($(this).index()).offset().top
        $("body,html").stop().animate({
          scrollTop: current
        }, function () {
          flag = true
        })
        // 让当前背景改变其余不变
        $(this).addClass("active").siblings("li").removeClass("active")
      })

      // 返回顶部
      $(".returnTop").on("click", function () {
        $("body,html").stop().animate({
          scrollTop: 0
        })
      })

      // 封装：函数节流，用于防止用户多次滚动滚动条;
      function throttling(callback, delay) {
        var t = null;
        return function () {
          if (t !== null) {
            return false;
          }
          t = setTimeout(function () {
            t = null;
            callback();
          }, delay)
        }
      }
    })
  </script>
</body>

</html>

效果图如下

在这里插入图片描述

牛先森家的牛奶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery电梯楼层实现

实现需求： 1、当滚动到一定高度，显示和隐藏右边的floor 2、点击floor 里面的标签跳到对应显示主页面的内容区域 3、点击floor 让当前的标签的样式改变，比如背景和颜色，其余不变 4、滚动页面时，让floor里面的标签和主页面对应区域一致直接上代码。。。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫

专栏目录