Перемещение div на свиток с чистым javascript

Question

Я хочу, чтобы изображение внутри 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';

Есть ли другой лучший способ справиться с перемещением элементов html с помощью DIV? Любые статьи, которые объясняют? Я действительно новичок в этом. Пожалуйста, помогите мне.

Добавить стиль перед верхней, работал. Однако похоже, что стиль применяется только один раз, поскольку он перемещается только один раз, когда я прокручиваю. Есть идеи.

Answer 1

Один небольшой промах, он должен быть style.top:

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

Answer 2

Заменить

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');