如何让一个元素在页面上顺滑向上滑动？

Question

我有以下代码，其中包含定位隐藏 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>

提前致谢

Answer 1

太近了！您所缺少的只是 .converter class 底部属性上的 'px'。因为 -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>

如何让一个元素在页面上顺滑向上滑动？

How to make an element slide up the page smoothly?

javascript

css

css-transitions