index.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. $(function() {
  2. // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
  3. // 节流阀 互斥锁
  4. var flag = true;
  5. // 1.显示隐藏电梯导航
  6. var toolTop = $(".recommend").offset().top;
  7. toggleTool();
  8. function toggleTool() {
  9. if ($(document).scrollTop() >= toolTop) {
  10. $(".fixedtool").fadeIn();
  11. } else {
  12. $(".fixedtool").fadeOut();
  13. };
  14. }
  15. $(window).scroll(function() {
  16. toggleTool();
  17. // 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
  18. if (flag) {
  19. $(".floor .w").each(function(i, ele) {
  20. if ($(document).scrollTop() >= $(ele).offset().top) {
  21. console.log(i);
  22. $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
  23. }
  24. })
  25. }
  26. });
  27. // 2. 点击电梯导航页面可以滚动到相应内容区域
  28. $(".fixedtool li").click(function() {
  29. flag = false;
  30. console.log($(this).index());
  31. // 当我们每次点击小li 就需要计算出页面要去往的位置
  32. // 选出对应索引号的内容区的盒子 计算它的.offset().top
  33. var current = $(".floor .w").eq($(this).index()).offset().top;
  34. // 页面动画滚动效果
  35. $("body, html").stop().animate({
  36. scrollTop: current
  37. }, function() {
  38. flag = true;
  39. });
  40. // 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
  41. $(this).addClass("current").siblings().removeClass();
  42. })
  43. })