Javascript липкий div после прокрутки

Этот вопрос может быть глупым для многих здесь. Я делаю липкий div после прокрутки в чистом JS. Некоторые люди могут посоветовать сделать это в jQuery, но мне это не интересно. Мне нужно что-то похожее наэто, Здесь div движется до самого верха, но мне нужно, чтобы у него было 60px. Я сделал скрипт, но он не работает. Может кто-нибудь помочь мне решить это?

Вот мой код.

HTML

<div id="left"></div>
<div id="right"></div>

CSS

#left{
    float:left;
    width:100px;
    height:200px;
    background:yellow;
}

#right{
    float:right;
    width:100px;
    height:1000px;
    background:red;
    margin-top:200px;
}

JS

window.onscroll = function()
{
    var left = document.getElementById("left");



    if (left.scrollTop < 60 || self.pageYOffset < 60) {
        left.style.position = 'fixed';
        left.style.top = '60px';
    } else if (left.scrollTop > 60 || self.pageYOffset > 60) {
        left.style.position = 'absolute';
        left.style.margin-top = '200px';
    }

}

Это то, что мне нужно для достижения. Левый div должен иметьmargin-top:200px а такжеposition:absolute на странице загрузки. Когда пользователь прокручивает страницу, левый div должен прокручиваться, и когда он достигаетtop:60px; его позиция и маргинальная вершина должны измениться наposition:fixed а такжеmargin-top:60px;

ЗдесьFIDDLE

Ответы на вопрос(1)

Ваш ответ на вопрос