如何在鼠标滚轮滚动时触发点击事件（5 个部分）

Question

我设置了 5 个部分，并且都是固定位置。 当处于活动状态时，该部分在 CSS 中以 100vh 的速度在窗口中查看。 其他人在 -100vh 的机翼中等待。 当左侧的链接被点击时，1 秒内，活动部分有多个过渡来完成它的事情，然后 1 秒后，被点击的部分是新的活动，并有一个过渡进入。这些都是设置和工作得很好！ 但是客户端希望在您滚动鼠标滚轮时有一个 MOUSE 事件。 问题是，确实没有滚动，因为我使用所有固定定位进行了设置。 当您滚动轮子时，如何使我的代码工作，它会触发下一部分的点击事件？ 或者如果你向上滚动，你会回到上一节？ 我对 Jquery 不太熟悉，所以我下面的代码可能看起来又长又乱。 大概可以简化一下。 总共有 5 个点击事件函数，其余的负责转换。 如果#SlideItem3 处于活动状态并且您在鼠标滚轮上向上滚动一次，我希望#SlideItem2 处于活动状态。 或者，如果您在#SlideItem3 上向下滚动，我希望#SlideItem4 处于活动状态。 我仍然希望保持链接也能够点击左侧导航。 任何帮助，将不胜感激！

 $( document ).ready(function() {

  $("#SlideLink1").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem1 Active */

  });

  $("#SlideLink2").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem2 Active */

  });

  $("#SlideLink3").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem3 Active */

   });

    $("#SlideLink4").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem4 Active */

  });

    $("#SlideLink5").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem5 Active */

  });

  });

HTML

  <div id="LeftHomeNav"> 
   <ul>
    <li><span id="SlideLink1" class="active">Slide 1 Title</span></li>
    <li><span id="SlideLink2" class="">Slide 2 Title</span></li>
    <li><span id="SlideLink3" class="">Slide 3 Title</span></li>
    <li><span id="SlideLink4" class="">Slide 4 Title</span></li>
    <li><span id="SlideLink5" class="">Slide 5 Title</span></li>
  </ul> 
  </div><!--#LeftHomeNav-->


                     <div id="CustomSlider"> 

                      <div id="SlideItem1" class="slideitem active"> 

                       </div><!--#SlideItem1-->

                      <div id="SlideItem2" class="slideitem"> 

                       </div><!--#SlideItem2-->

                      <div id="SlideItem3" class="slideitem"> 

                       </div><!--#SlideItem3-->

                      <div id="SlideItem4" class="slideitem"> 

                       </div><!--#SlideItem4-->

                      <div id="SlideItem5" class="slideitem"> 

                       </div><!--#SlideItem5-->

                      </div><!--#CustomSlider-->

Answer 1

看起来您在使用 jQuery 的 .Scroll() 方法。

https://api.jquery.com/scroll/

就像是

$(body).scroll(funtion() {

// Work out location stuff such as what section is showing currently

// Depending on above^ run suitable function
switch (desiredSection) {
    case section1:
        animateToSection1();
        break;
    case section2:
        animateToSection2();
        break;
    case section3:
        animateToSection3();
        break;
    default:
        // Do default/fallback option
}

});

Answer 2

这是最终对我有用的方法。 我也使用相同的概念来检查导航活动项。

$( document ).ready(function() {
 $('body').bind('mousewheel', function(e){

 /* Scrolling Up */
 if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {

 var activeItem = $(".slideitem.active"); /* Current Active Slide */ 
 var prevItem = $(".slideitem.active").prev();  /* Find Prev Slide */

/* If First Item, do nothing, else Remove Active class and place on prev class */
if($(activeItem).is(':first-child')) { 

} else {

  $(activeItem).removeClass("active");
  $(prevItem).addClass("active");

}


 } else { 

 /* Scrolling Down */

 var activeItem = $(".slideitem.active"); /* Current Active Slide */
 var nextItem = $(".slideitem.active").next(); /* Find Next Slide */ 


/* If Last Item, do nothing, else Remove Active class and place on next class */
if($(activeItem).is(':last-child')) { 
} else {

  $(activeItem).removeClass("active"); 
  $(nextItem).addClass("active"); 

}

}

 }); 
});