JavaScript sticky div po przewinięciu

To pytanie może być głupie dla wielu tutaj. Robię lepkie div po przewinięciu w czystym JS. Niektórzy ludzie mogą doradzić, aby zrobić to w jQuery, ale nie jestem tym zainteresowany. Potrzebuję czegoś podobnegoto. Tutaj div porusza się aż do samego początku, ale potrzebuję go, aby mieć szczyt 60px. Zrobiłem skrypt, ale to nie działa. Czy ktoś może mi pomóc rozwiązać ten problem?

Oto mój kod.

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

}

To, co muszę osiągnąć. Lewy div musi miećmargin-top:200px iposition:absolute na stronie ładowania. Gdy użytkownik przewija stronę, lewy div powinien się przewijać i gdy osiągnietop:60px; jego pozycja i margines powinny zmienić się naposition:fixed imargin-top:60px;

Tutaj jestSKRZYPCE

questionAnswers(1)

yourAnswerToTheQuestion