Как присвоить класс элементу во время скора

450

24 апреля 2017, 04:05

Ребята, ситуация такая. Есть сайт: onedaytv.ru

Для начала наведите мышью на "Главная". Вы увидите что фон кнопки поменяется на серый (поменяется анимировано)

Я бы хотел реализовать такую симуляцию hover во время прокрутки сайта. То есть, к примеру, начинаем скролить сайт с главной до раздела портфолио" - горит серым кнопка главная, как только начинаем скролить блок "портфолио" заливка с кнопки главная пропадает (анимировано как это происходит при наведении мыши) и также анимировано загорается кнопка портфолио (как это происходит если навести мышью).

Отследить скролинг и его позицию я могу сам. Вот пример кода:

  var screenHeight = $(window).height()-70;
  if (0 <= scroll && scroll < 2 * screenHeight ) {
    тут надо симулировать hover для кнопки главная
  }
  else {
    тут надо его убирать
  }

Вся сложность для меня заключается в том, как добавить кнопке вот этот эффект анимации, когда я докрутил до определенной позиции. Я специально дал ссылку на сайт, что бы вы в исходном css посмотрели как реализована сейчас анимация.

Answer 1

Вот так:

var link = document.getElementById('Link'); 
if (0 <= scroll && scroll < 2 * screenHeight ) { 
    link.classList.add('active') 
  } 
  else { 
     link.classList.remove('active')  
  }

* { 
  box-sizing: border-box; 
} 
 
.wrapper { 
  width: 300px; 
  margin: 30px auto; 
} 
.wrapper .link { 
  display: inline-block; 
  position: relative; 
  cursor: pointer; 
  padding: 4px 10px; 
} 
.wrapper .link:after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  z-index: -1; 
  width: 100%; 
  height: 2px; 
  background-color: #c0c0c0; 
  -webkit-transition: 300ms; 
  transition: 300ms; 
} 
.wrapper .link:hover:after, .wrapper .link.active:after { 
  height: 100%; 
}

<div class="wrapper"> 
	<div class="link" id='Link'> 
		Hover me 
	</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как разрешить конфликт двух скриптов?

Добрый день! Помогите, пожалуйста, разрешить конфликт двух скриптовПервый скрипт работает успешно, если удаляю второй

369

javascript

Jquery: как заставить функцию scroll вызываться только один раз?

Есть небольшая функция, которая при скролле добавляет\удаляет класс элементу + скрывает\открывает блоки:

421

javascript

Gulp собрать в минимизировать в один файл

Есть директория src/less-build-structure/ с кучей файлов и папокКак все эти файлы, включая те, которые в папках собрать в один файл est

338

javascript

перемещение элемента с помощью AngularJS или JQuery

Задача такая есть: несколько кнопок, если нажать одну из них то к ней должен переместить элемент , в данном случае просто текстЯ реализовал...

321