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

Question

Этот вопрос может быть глупым для многих здесь. Я делаю липкий div после свитка в чистом JS. Некоторые люди могут советовать сделать это в jQuery, но я не заинтересован в этом. Мне нужно что-то похожее на this. Здесь 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

Answer 1

CSS

#left { 
    float:left; 
    width:100px; 
    height:200px; 
    background:yellow; 
    margin:200px 0 0; 
} 
#left.stick { 
    position:fixed; 
    top:0; 
    margin:60px 0 0 
} 

добавил класс stick, поэтому javascript не должен делать слишком много работы.

JS

// set everything outside the onscroll event (less work per scroll) 
var left  = document.getElementById("left"), 
    // -60 so it won't be jumpy 
    stop  = left.offsetTop - 60, 
    docBody = document.documentElement || document.body.parentNode || document.body, 
    hasOffset = window.pageYOffset !== undefined, 
    scrollTop; 

window.onscroll = function (e) { 
    // cross-browser compatible scrollTop. 
    scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop; 

    // if user scrolls to 60px from the top of the left div 
    if (scrollTop >= stop) { 
    // stick the div 
    left.className = 'stick'; 
    } else { 
    // release the div 
    left.className = ''; 
    } 
} 

WORKING JSFIDDLE