Как сделать так, чтобы элемент плавно скользил по странице? - PullRequest
Новая
       20

Как сделать так, чтобы элемент плавно скользил по странице?

1 голос
/ 23 мая 2019

У меня есть следующий код, который содержит позиционный скрытый div (.converter), и я использую JS, чтобы заставить его скользить вверх и вниз на основе прокрутки пользователя.Но я хотел бы сделать это гладко, и я думал, что переход сделает эту работу. 

window.addEventListener('scroll', function() {

  var scroll = window.pageYOffset || document.documentElement.scrollTop;

  var element = document.querySelector(".converter");

  if (scroll >= 400) {
    element.classList.add("atcbottomactive");
  } else {
    element.classList.remove("atcbottomactive");
  }

});
.converter {
	position: fixed; 
	height: 60px; 
	width: 100%; 
	bottom: -200; 
	background: red; 
	transition: 1s;
	z-index: 10000;
}

.ccontent {
	display: inline-flex;
	width: 100%;
	padding: 10px 5%;
}

.atcbottomactive{
	bottom:0;
	transition: 1s;
}

.page {
  background: green;
  height: 1500px;
  width: 100%;
 }
<div class="page">Scroll me: 400px</div>
<div class="converter">
  <div class="ccontent"></div>
</div>

Заранее спасибо

1 Ответ

3 голосов
/ 23 мая 2019

Так близко! Все, что вам не хватало, это «px» в вашем нижнем атрибуте класса .converter. Поскольку -200 не является допустимым дном, вы переходили от неустановленного дна к 0px, что не может быть анимировано / переведено. 

window.addEventListener('scroll', function() {

  var scroll = window.pageYOffset || document.documentElement.scrollTop;

  var element = document.querySelector(".converter");

  if (scroll >= 400) {
    element.classList.add("atcbottomactive");
  } else {
    element.classList.remove("atcbottomactive");
  }

});
.converter {
	position: fixed; 
	height: 60px; 
	width: 100%; 
	bottom: -200px; 
	background: red; 
	transition: 1s;
	z-index: 10000;
}

.ccontent {
	display: inline-flex;
	width: 100%;
	padding: 10px 5%;
}

.atcbottomactive{
	bottom:0;
	transition: 1s;
}

.page {
  background: green;
  height: 1500px;
  width: 100%;
 }
<div class="page">Scroll me: 400px</div>
<div class="converter">
  <div class="ccontent"></div>
</div>
...