选项卡幻灯片效果：将笔转换为原始JavaScript

Question

I was wondering if someone would be willing to help me translate this pen I created into plain ol' JavaScript. I'm just learning JavaScript and would like to see what this same effect looks like in pure JavaScript instead of jQuery. Here is the 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>