在滚动时切换数字和运行功能答案

【问题标题】：Switch between numbers and run function on scroll在滚动时切换数字和运行功能
【发布时间】：2018-09-13 18:02:10
【问题描述】：

如何在点击和滚动时在这些数字之间切换类..？所以，基本上我想在旋转鼠标滚轮时在这些之间切换，然后触发某种回调......

编辑：所以，我希望能够在窗口中的任何位置移动鼠标滚轮，这将反过来在 li 中切换类 .active。 Also, when for example li#runOne is selected, it should run a callback function let's say runFunctionOne.当 li#runTwo 被选择/滚动到 - 它会运行例如 runFunctionTwo...

$("#runTwo").on('click', function() {
  $("#runTwo").toggleClass("active", function() {
    // Run some callback
    console.log("Two");
  });
});

$(window).scroll(function() {
  // Switch between numbers on scroll
});

ul {
  margin: 50px auto;
  width: 300px;
}

.active {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="runOne" class="runOne active">Run 1</li>
  <li id="runTwo" class="runTwo">Run 2</li>
  <li id="runThree" class="runThree">Run 3</li>
</ul>

【问题讨论】：

你能解释一下吗？你想达到什么目标？
检查下面的答案 - 类似的东西：所以，我希望能够在窗口中的任何位置移动鼠标滚轮，这将在 li 中切换类 .active。 Also, when for example li#runOne is selected, it should run a callback function let's say runFunctionOne.当 li#runTwo 被选择/滚动到 - 它会运行例如 runFunctionTwo...

标签： javascript jquery css events scroll

【解决方案1】：

您可以像这样使用单击和鼠标滚轮切换类

https://codepen.io/creativedev/pen/rKOBEq

$('.rr').on('click, mousewheel', function() {
          $('.rr').removeClass('active');
         $(this).addClass('active');
            console.log("Two");
});

【讨论】：

很好...谢谢。是否可以滚动身体上的任何地方，但只能在 ul 内切换类？所以，点击
的行为完全相同，但滚动到任何地方并仍然在 li 上切换类？

$('.list').click(function(e){ $('.list.active').removeClass('active'); $(this).addClass('active').trigger('activeEvent'); }); $(document).on('mousewheel',function(e){ var currentScrollAmt=$(window).scrollTop(); var activeLi=$('.list.active'); $('.list.active').removeClass('active'); if(e.originalEvent.wheelDelta /120 > 0) { //Scrolling Up if(!activeLi.is(':first-child')) activeLi.prev('li').addClass('active').trigger('activeEvent'); } else{ //Scrolling Down if(!activeLi.is(':last-child')) activeLi.next('li').addClass('active').trigger('activeEvent'); } }); $('li').on('activeEvent',function(e){ runCallback(e.target.id); }); function runCallback(id) { if(!id) return false; switch(id) { case 'runOne': alert('runOne Callback Code'); break; case 'runTwo': alert('runTwo Callback Code'); break; case 'runThree': alert('runThree Callback Code'); break; } }