jquery判断我在网页中的楼层位置

以下是全部代码:

<!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>
      .header {
         100%;
        height: 1100px;
      }
      .floor {
         100%;
        height: 890px;
        border-top: 1px solid #000;
      }
      .footer{
           100%;
          height: 350px;
      }
    </style>
<script src="js/jquery.min.js"></script>
  </head>

  <body>
    <div class="header" id="header">头部内容</div>
    <div id="1" class="floor">楼层1</div>
    <div id="2" class="floor">楼层2</div>
    <div id="3" class="floor">楼层3</div>
    <div id="4" class="floor" data-floor="lastfloor">楼层4</div>
    <div class="footer">底部内容</div>
    <script type="text/javascript">
        $(document).ready(function () {
          //滚动条滚动
          $(window).scroll(function () {scrollloads();}); //滚动条滚动事件
          var floor = '';
          function scrollloads() {
            var scrolltop = $(this).scrollTop();
            $(".floor").each(function (index, value) {
              // console.log(index, $(this).next());
              if ($(this).attr("data-floor") == "lastfloor") {
                if (scrolltop > $(this).offset().top) {
                  if (floor != $(this).attr("id")) {
                        floor=$(this).attr("id")
                        loadFloors($(this).attr("id"))
                  }
                }
              } else {
                    if (scrolltop > $(this).offset().top && scrolltop < $(this).next().offset().top) {
                        if (floor != $(this).attr("id")) {
                            floor=$(this).attr("id")
                            // floor=$(this).attr("id")
                            loadFloors($(this).attr("id"))
                        }
                    }
              }
            })
          }
    
          function loadFloors(loadIndexs) {
            console.log("我在楼层:" + loadIndexs + "");
          }
        });
      </script>
  </body>
</html>
原文地址:https://www.cnblogs.com/smedas/p/12867564.html