以下是全部代码：
<!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>