使用純javascript移動滾動div div

我希望div內的圖像在用戶滾動時垂直向下移動。它只能在頁面結束時結束。已經使用了另一篇文章中的下面的腳本解決方案，但它沒有幫助。使用純javascript移動滾動div div

HTML

<div id="wrapper"> 
    <img src="images/samp_scroll.png" class="ïmage"> 
</div>

CSS：

#wrapper { 
    position: absolute; 
} 
.image { 
    width: 560px; 
    height: 700px; 
}

腳本：

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; 
console.log(vertical_position); 
    var your_div = document.getElementById('wrapper'); 
    your_div.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want 
}

什麼，我做錯了什麼？進一步驗證，雖然我可以得到控制檯值vertical_position我真的不能使用下面的代碼移動div。

var your_div = document.getElementById（「wrapper」）; your_div.top = 400 +'px';

是否有任何其他最好的方法來處理與DIV移動html元素？任何文章解釋？我對此很新。請幫助我。

在頂部之前添加樣式，工作。不過看起來這個樣式只適用一次，因爲它只會在我滾動時移動一次。有任何想法嗎。

來源

2015-11-16 Ashwin

嘗試。 http://stackoverflow.com/questions/5616335/moving-div-with-scroll –

這就是我在這裏使用的確切的代碼片斷，因爲你看到了。 – Ashwin

使用'your_div.style.top'。 –

一個小小姐，應該是style.top：

your_div.style.top = (vertical_position + 200) + 'px';

來源

2015-11-16 06:44:48

謝謝你的工作。如果我想讓我的div隨滾動一起移動怎麼辦？看起來這隻會移動一次！ – Ashwin

嘗試移動這些代碼'var your_div = document.getElementById（'wrapper'）; your_div.top =（vertical_position + 200）+'px';'在else if之後。當'else if'爲true時，當前'top'值只會被更新。 –

是嗎？但是我看到我的console.log每次滾動時都會經常更新。不太可能這會是問題嗎？ – Ashwin

更換

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

與

$("#wrapper").css("top",(vertical_position + 200) + 'px');

來源

2015-11-16 07:09:23

使用純javascript移動滾動div div

回答

相關問題