Esta pergunta talvez seja estúpida para muitos aqui. Eu estou fazendo div pegajoso depois de rolar em JS puro. Algumas pessoas podem aconselhar a fazê-lo no jQuery, mas eu não estou interessado nele. O que eu preciso é algo semelhante aisto. Aqui o div se move todo o caminho até o topo, mas eu preciso que ele tenha 60px no topo. Eu fiz um script, mas não está funcionando. Alguém pode me ajudar a resolver isso?

Aqui está o meu código.

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

}

Isso é o que eu preciso alcançar. A div esquerda tem que termargin-top:200px eposition:absolute no carregamento da página. Quando o usuário rola a página, o div da esquerda deve rolar e quando chegartop:60px; sua posição e top de margem deve mudar paraposition:fixed emargin-top:60px;

Aqui está oFIDDLE