pageYoffset

Question

私は事を知っている必要がありますし、解決する必要がありますので、成功していないため。

たとえば、要素divが左側に表示されるように500pxでスクロールしたいとします。 OK HTML/CSS構造は大丈夫です！しかし、JSのために働いていないhumm。ページが> 500pxなどである場合には、その後、

var divLis = document.querySelector(".left"); 

window.addEventListener("scroll", function (e) { 

    if(window.pageYOffset > 500) { 
     console.log(window.pageYOffset) 
     divLis.style.transform = "translateX(0)"; 
    } 

}) 

：

HTML：：

<div class="left"></div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

body { 
    height: 200vh; 
} 

.left { 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    position: absolute; 
    top: 150%; 
    transform: translateX(-300px); 
    transition: 1s; 
} 

はJavaScript

あなたはこの例を見ることができます要素が表示されます。しかし、私にとっては大丈夫ではありません、私は== 500pxに私の解決策がありますか？

PLEASE：いいえjQueryの

Answer 1

あなたがwindow.scrollYまたはdocument.body.scrollTop

var divLis = document.querySelector(".left"); 
 

 
window.addEventListener("scroll", function(e) { 
 
    var scrollTop = document.body.scrollTop; 
 
    //var scrollTop = window.scrollY; 
 
    //console.log(scrollTop); 
 
    if (scrollTop > 500) { 
 
    divLis.style.transform = "translateX(0)"; 
 
    } 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
body { 
 
    height: 500vh; 
 
} 
 

 
.left { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 150%; 
 
    transform: translateX(-300px); 
 
    transition: 1s; 
 
}

<div class="left">left</div>