Добавления-удаления элементов при скролле, javascript?

Question

[beefront17]

Добрый день! Подскажите пожалуйста как правильно добавлять-удалять элементы в соответствии с условия. Нужно при скролле выводить кнопки если нужно, как здесь на меню. Вопрос как правильно организовать такой функционал, писать 100500 if else не хочеться.
Буду благодарен за любою помощь, любой пример)

Answer 1

[Владимир]

На указанном сайте увидел только одну кнопку с функционалом goTop - делается в несколько строк на JS, типа такого:

$(window).scroll(function(event){
	var scroll = $(window).scrollTop();

	if (scroll >= 50) {
		$("#back-to-top").addClass("show");
	} else {
		$("#back-to-top").removeClass("show");
	}
});

$('a[href="#top"]').on('click',function(){
    $('html, body').animate({scrollTop: 0}, 'slow');
    return false;
});

<!-- GO TO TOP -->
<div id="back-to-top">
	<a href="#top"><i class="fa fa-angle-up"></i></a>
</div>

#back-to-top {
  display: block;
  z-index: 500;
  width: 40px;
  height: 40px;
  line-height: 35px;
  text-align: center;
  font-size: 20px;
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #25272a;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#back-to-top i {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#back-to-top a {
  width: 40px;
  height: 40px;
  display: block;
  color: #c2cbcd;
}

#back-to-top.show {
  bottom: 20px;
}

#back-to-top:hover {
  background-color: #1dcfd1;
}

#back-to-top:hover i {
  color: #fff;
}

Код взят из своего работающего проекта.

А вообще, для более сложных вещей рекомендую вот это.

Comments

[beefront17]

Я об этом.