0

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

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

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

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

  var screenHeight = $(window).height()-70;

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

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

1 ответ 1

0

Вот так:

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>

6
  • Спасибо что откликнулись! Вижу что Ваш пример работает, а скажите, можно ли ваш пример как то реализовать исходя из моего кода. Я специально дал ссылку что бы было видно какая сейчас разметка и как работает навигация в данный момент. Может вы сможете сказать что дописать или как отредактировать мой ксс что бы получить то что нужно.
    – WhoIsDT
    Commented 23 апр. 2017 в 11:40
  • Дело в том что я бы хотел оставить свой ксс и свою разметку, и чисто добавить класс active или что то в этом роде что бы получить то что мне необходимо. помогите пожалуйста:)
    – WhoIsDT
    Commented 23 апр. 2017 в 11:45
  • класс актив нужно добавить к navelement. Но тут нюанс, скорее нужно не пиксельно перехватывать событие, а когда наш якорь упирается в потолок, тогда срабатывает событие (назовем его "ховер").
    – NeedH8
    Commented 23 апр. 2017 в 11:50
  • у меня честно говоря ступор только в этих css. я уже себе события и когда присваивать класс актив сделаю. у меня вопрос каким должен быть css для .active{ код класса}, что бы когда сработало событие, я присвоил элементу этот класс и он анимировано выскочил и закрепился. Исходя из моего уже написанного кода.
    – WhoIsDT
    Commented 23 апр. 2017 в 12:02
  • 1
    Спасибо! кажется разобрался! Ваш ответ отметил как правильный, пускай кому от может пригодится код:)
    – WhoIsDT
    Commented 23 апр. 2017 в 13:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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