Tab Slide Effects：将笔转换成香草JavaScript

Question

我想知道如果有人愿意帮我翻译我创建的这个笔到普通的ol 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>