基于jq的电梯导航!!!∑(ﾟДﾟノ)ノ

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

宝儿呀

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

阅读量105

点赞数 1

本文链接：https://blog.csdn.net/fengya1112/article/details/118880310

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box > div {
        width: 100%;
        height: 800px;
      }
      .box1 {
        background-color: lightblue;
      }
      .box2 {
        background-color: lightcoral;
      }
      .box3 {
        background-color: lightcyan;
      }
      .box4 {
        background-color: lightgoldenrodyellow;
      }
      .box5 {
        background-color: lightgray;
      }
      .nav {
        width: 80px;
        height: 20px;
        position: fixed;
        left: 100px;
        top: 50%;
        transform: translateY(-50%);
      }
      .nav div {
        border: 1px solid lightgreen;
        background: lightpink;
        cursor: pointer;
      }
      .back {
        position: fixed;
        right: 30px;
        bottom: 200px;
        width: 50px;
        height: 20px;
        text-align: center;
        background: lightsalmon;
        display: none;
      }
      .current {
        background-color: lightseagreen !important;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
    </div>
    <div class="nav">
      <div class="nav1 current">家用电器</div>
      <div class="nav2">家用家具</div>
      <div class="nav3">手机数码</div>
      <div class="nav4">语文数学</div>
      <div class="nav5">英语体育</div>
    </div>
    <div class="back">back</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $(function () {
        $(window).scroll(function () {
          if ($(window).scrollTop() >= $('.box2').offset().top) {
            $('.back').fadeIn();
          } else {
            $('.back').fadeOut();
          }
          for (let i = 0; i < $('.box div').length; i++) {
            if ($(window).scrollTop() >= $('.box div').eq(i).offset().top) {
              $('.nav div')
                .eq(i)
                .addClass('current')
                .siblings()
                .removeClass('current');
            }
          }
        });
        $('.nav div').click(function () {
          $(this).addClass('current').siblings().removeClass('current');
          $('html, body').animate({
            scrollTop: $('.box div').eq($(this).index()).offset().top,
          });
        });
        $('.back').click(function () {
          $('html,body').animate({ scrollTop: 0 });
        });
      });
    </script>
  </body>
</html>

宝儿呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jq的电梯导航!!!∑(ﾟДﾟノ)ノ

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫