2011-04-11 86 views
12

當滾動條移動時,我必須移動div,但需要使用純javascript,並且position:fixed將不能用於佈局。該div的原始渠道是相對於其他東西。是否有一個簡單的實現使用像onScroll這樣的事件來檢測頁面向上或向下移動的像素數量,並相應地更改div的位置。 div只需要垂直移動。所以,如果我可以檢測到頁面移動了多少像素,我可以將其添加到div的位置或將其減去。任何幫助是極大的讚賞 :-)。帶滾動的移動div

+1

所以你現在是...(這是你粘貼代碼段你這樣做的遠)什麼 – 2011-04-11 03:00:37

回答

15
window.onscroll = function (e) { 
    var vertical_position = 0; 
    if (pageYOffset)//usual 
    vertical_position = pageYOffset; 
    else if (document.documentElement.clientHeight)//ie 
    vertical_position = document.documentElement.scrollTop; 
    else if (document.body)//ie quirks 
    vertical_position = document.body.scrollTop; 

    var your_div = document.getElementById('some_div'); 
    your_div.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want 
} 
+2

你,在每一個瀏覽器我嘗試在完美地工作真棒:-)非常感謝你幫助我。 – rubixibuc 2011-04-11 04:29:37

+0

@Jake首先它必須是your_div.style.top(代碼中缺少樣式)不是嗎?而且這也只能移動一次div而不是我們滾動。請糾正我,如果我錯了! – Ashwin 2015-11-16 09:04:57

+0

用'your_div.style.top'代替'your_div.top' – ZiTAL 2016-12-26 10:25:10