Esta pregunta puede ser estúpida para muchos aquí. Estoy haciendo div adhesivo después de desplazamiento en JS puro. Algunas personas pueden dar consejos para hacerlo en jQuery, pero no estoy interesado en ello. Lo que necesito es algo similar aesta. Aquí el div se mueve completamente hacia arriba, pero necesito que tenga 60px arriba. Hice un guión pero no funcionó. puede alguien ayudarme a resolver esto?

Aquí está mi 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';
    }

}

Esto es lo que necesito para lograr. El div izquierdo tiene que tenermargin-top:200px yposition:absolute en la página de carga. Cuando el usuario desplaza la página, el div izquierdo debe desplazarse y cuando alcanzatop:60px; su posición y margen superior debe cambiar aposition:fixed ymargin-top:60px;

Aquí está elVIOLÍN