如何使元素顺利向上滑动？

Question

I have the following code that contains positioned hidden div (.converter) and I use JS to make it slide up and down based on the user's scroll. But I would like to make it smoothly and I thought transition would do the job.

 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> 

Thanks in advance

Answer 1

So close! All you were missing was the 'px' on your .converter class bottom attribute. Because -200 isn't a valid bottom, you were going from an unset bottom to 0px, which cant be animated/ transitioned.

 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>