Ну например так (jQuery не имеет отношения к коду. Добавлено для наглядного демо):
let u = 0; // Индекс для нужного переключения
let i = 0; // Для подсчета пройденного расстояния скролла
let x = 0; // Потому что захотелось
document.addEventListener('scroll', function(){
if( u > 2){return;} /* Элементов всего три штуки. Если индекс оказалсы выше 2,
Разворачиваемся и больше ничего не выполняем */
i++; /* +1 для каждого проскролленного пикселя */
if( i > x ){ // x == 0, первый переход произойдет сразу
document.getElementsByTagName('li')[u].click();//кликаем на первый элемент
u++;//увеличиваем u на единицу, на следующем круге кликнет на второй.
x = 50*u; // Меняем значение x. Будет 50*1, потом 50*100.
/*Т.е. в следующий раз функция запустится только когда будет проскроллено еще 50 пикселей*/
}
});
/*****************/
$('li').on('click', function(){
$('li').removeClass('active');
$(this).addClass('active');
});
body {
background: #fff;
height: 1000px;
}
ul{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
position: fixed;
justify-content: center;
list-style-type: none;
}
li{
margin-left: 30px;
cursor: pointer;
border: 2px solid orange;
width: 100px;
}
.active {
color: red;
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Дом</li>
<li>Работа</li>
<li>Третье место</li>
</ul>
А можно через setTimeout
, менять значения переменных через 5 секунд, например. Тогда клик на новый элемент не произойдет, пока не пройдет 5 секунд.