标签幻灯片效果：将笔翻译成香草JavaScript

Question

我想知道是否有人愿意帮助我将我创建的笔翻译成简单的JavaScript。我只是在学习JavaScript，并希望看到纯JavaScript而不是jQuery的效果相同。这是jQuery：

$(document).scroll(function(){

var y = $(this).scrollTop();
 if (y > 500 ){
   $(".arrow-box").addClass("slide");
 }

 else{
   $(".arrow-box").removeClass("slide");
 }

}）;

See Pen Here.

Answer 1

let arrow = document.querySelector('.arrow-box');

document.addEventListener('scroll', () => {
  if (window.scrollY > 500)
    return arrow.classList.add('slide');
  arrow.classList.remove('slide');
});

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px;
  background-color: gray;
  position: relative;
}

.container {
  margin: 0 auto;
  height: 500px;
  width: 1200px;
  background-color: lightblue;
  margin-bottom: 100px;
}

img {
  width: 50px;
  height: auto;
}

.arrow_container {
  left: 0;
  right: 0;
  bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  height: auto;
  height: 100px;
  width: 100%;
  max-width: 1400px;
  background-color: #2d2d2d;
  overflow: hidden;
}

.arrow-box {
  transform: translateX(100%);
  transition: transform: .3s ease-in-out;
  -webkit-transition: -webkit-transform .3s ease-in-out;
  position: absolute;
  right: 0px;
  padding: 25px;
  height: 100px;
  background-color: red;
}

.slide {
  transform: translateX(0%);
}

<div class="wrapper">
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
  <div class="container"></div>
</div>
<div class="arrow_container">
  <div class="arrow-box">
    <img src="http://cdns2.freepik.com/media/img/subscription_modal/rocket.svg" />
  </div>
</div>