想要頁面Yoffset

我需要知道一件事情，並確定您必須解決，因爲不成功。想要頁面Yoffset

我想在500px滾動例如元素div出現在左側。好的HTML/CSS結構是好的！但對於JS humm不起作用。

你可以看到這個例子：

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：

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

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

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

})

當頁> 500像素，後該元素出現。但對我來說不好，我想== 500px你有我的解決方案？

請：沒有JQuery的

來源

2017-02-11 KolaCaine

使用.scrollTop？ http://www.w3schools.com/jsref/prop_element_scrolltop.asp – NoNameIamLame

if（divLis.scrollTop === 500）console.log（divLis.scrollTop） divLis.style.transform =「translateX（0）」; } 不工作..我之前嘗試這個 – KolaCaine

你錯過了;後console.log（） – NoNameIamLame

您可以使用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>

來源

2017-02-11 00:42:32

感謝您的回答。不可能使像scrollTop那樣的修復結果=== 500？爲什麼？ – KolaCaine

@KolaCaine它是。嘗試設置，然後慢慢滾動到500。如果你啓用console.log，可能會有所幫助，所以你知道你什麼時候接近500. –

好吧，我明白了。：）謝謝 – KolaCaine

想要頁面Yoffset

回答

相關問題