<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.min.js"></script> <style> .recommend { height: 1000px; background-color: red; } .fixedtool { width: 100px; height: 101px; background-color: pink; } .jiadian { width: 300px; height: 200px; background-color: salmon; } .shouji { width: 300px; height: 200px; background-color: salmon; } .jiaju { width: 300px; height: 500px; background-color: salmon; } .current { background-color: black; } </style> </head> <body> <div class="recommend">1</div> <div class="fixedtool"> <ul> <li class="current">家电</li> <li>手机</li> <li>家具</li> </ul> </div> <div class="floor "> <div class="jiadian w">家电</div> <div class="shouji w">手机</div> <div class="jiaju w">家具</div> </div> <div class="jiadian"> </div> <script> $(function() { function toggleTool() { //当我们点击小li 互斥锁 var flag = true; if ($(document).scrollTop() >= toolTop) { $(".fixedtool").fadeIn(); } else { $(".fixedtool").fadeOut(); }; } var toolTop = $(".recommend").offset().top; toggleTool(); $(window).scroll(function() { toggleTool(); //页面滚动到某个内容区域 左侧小li添加和删除current类名 if (flag) { $(".floor .w").each(function(i, ele) { if ($(document).scrollTop() >= $(ele).offset().top) { console.log(i); $(".fixedtool li").eq(i).addClass("current").siblings().removeClass(); } }) } }); //点击导航栏得到相应内容 $(".fixedtool li").click(function() { //每次点击li去往页面要去的位置 //选出索引号的值去除他的位置 flag = false; console.log($(this).index()); var current = $(".floor .w").eq($(this).index()).offset().top; //页面滚动效果 $("body,html").stop().animate({ scrollTop: current }, function() { flag = true; }); //点击之后添加current $(this).addClass("current").siblings().removeClass(); // }) }) </script> </body> </html>
