0

ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    list-style-type: none;
  }
  li{
    margin-left: 30px;
    cursor:pointer
  }
<ul>
  <li>Дом</li>
  <li>Работа</li>
  <li>Третье место</li>
</ul>

  1. Как сделать чтобы при первом скролле был переход до Дома
  2. При втором скролле был переход до Работа
  3. При третьем скролле был переход до Третье место
3
  • А как будем измерять скролл?) Это событие запускается при любом сдвиге скроллбара, хоть на 1 пиксель. А для таких переходов явно указывают пройденное расстояние, например в пикселях... А можно разбить по времени... чтобы запускались при любом скролле, но не раньше, чем N секунд. 3 июн 2019 в 1:17
  • @OPTIMUS PRIME Здравствуйте можно код увидеть пожалуйста
    – Leks
    3 июн 2019 в 1:18
  • @OPTIMUS PRIME скиньте пожалуйста ссылку где про это можно почитать ?
    – Leks
    3 июн 2019 в 1:38

1 ответ 1

1

Ну например так (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 секунд.

2
  • я имел виду вот это get-element.3dn.ru/load/…
    – Leks
    3 июн 2019 в 2:03
  • пожалуйста скачайте и посмотрите
    – Leks
    3 июн 2019 в 2:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.