Переключение между номерами и запуск функции на прокрутке

Question

Как я могу переключать класс между этими числами как при нажатии, так и при прокрутке ...?Итак, в основном я хочу переключаться между ними при вращении колесика мыши и запускать какой-то обратный вызов после этого ...

РЕДАКТИРОВАТЬ: Итак, я хотел бы иметь возможность перемещать колесико мыши в любом месте окнаи это в свою очередь переключило бы класс .active в li.Кроме того, когда, например, выбран li # runOne, он должен запустить функцию обратного вызова, скажем, 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>

Answer 1

HTML-код:

<ul>
   <li id="runOne" class="runOne active list">Run 1</li>
   <li id="runTwo" class="runTwo list">Run 2</li>
   <li id="runThree" class="runThree list">Run 3</li>
</ul>

jQuery код:

$('.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;
 }
}

Answer 2

Вы можете переключать класс с помощью щелчка и колесика мыши, как это

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

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