2017-02-10 77 views
0

我想在用戶滾動時顯示一些元素(div例如)。 我看到一個scrollTop,但不是工作。因爲肯定我使用不好。 沒有JQuery,我找不到一些幫助。我不想使用JQuery。顯示一些元素用戶滾動

我試試這個:

var scroll = document.body.scrollTop; 
var divLis = document.querySelectorAll("div"); 

for(let i = 0; i < divLis.length; i++) { 
    if(scroll === divLis[i]) { 
     divLis[i].style.transform = "translateX(0)"; 
     divLis[i].style.transition = "2s"; 
    } 
} 
+0

你究竟想要達到什麼目的? –

回答

0

編輯:對不起,我只注意到你不想jQuery的,但我就離開這個位置的情況下,你改變了主意。

$(window).scroll(function() { 
    // show the div(s) 
}); 

這就是函數運行或火災,每當在窗口或視滾動的事件處理程序。

+0

我很對你,但是很重的文件。我尋找一個純JavaScript的解決方案 – KolaCaine

+1

@KolaCaine好吧 - FYI 88KB並不是很重。 –

1

老實說,我真的不能告訴你想要做什麼,但鑑於你的迴應@計量單位,pgregorio的回答,我猜你可能只是想一個純JS滾動監聽器:

window.addEventListener('scroll', function() {});

0

好的......我明白了。

我想試試這個:

* { 
     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: 5s; 
    } 
    // HTML : 

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

    // JS 

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

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

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

}) 

所以,這是很簡單的,我把我的頭什麼都沒有。

非常感謝回答我!

享受你的週末