Modificacion de CSS basado en Scroll Vertical

[fparedlo]

Hola gente, me encuentro con una funcionalidad q no puedo arregla mediante CSS y voy muy perdido en JavaScript.

Me gustaría cambiar las propiedad position de un elemento DIV cuando el scroll vertical de una web llegase a cierto numero de pixels... He intentado encontrar algo por Internet pero igual no se hacer la preguntar idónea a google...

Si alguno de ustedes me pudiese explicar como hacerlo o pasarme un link donde se explique me sería de graaaaan ayuda.

Muchas gracias por adelantado!!!!


Estoy intentando usar esto que encontré pero su funcionamiento no es correcto más bien algo errático...

Código Javascript:

<script type="text/javascript">
$(window).scroll(function() {      
    var scroll = $(window).scrollTop();
    if (scroll > 500) {
        $("#lol").removeClass("het1").addClass("het2");
    }
    else {
        $("#lol").removeClass("heat2").addClass("het1");
    }
});
</script>
 

Código CSS:

<style>
 
    .het1 {
        width: 200px;
        height: 200px;
        background: black;
        position: fixed;
        display: block;
        color:white;
    }
    .het2 {
        width: 200px;
        height: 200px;
        background: black;
        position: relative;
        display: block;
        color:white;
        margin: 500px 0 0 0;
 
    }
    .pig {
        width: 200px;
        height: 5020px;
        background: red;
        display: relative
        color:yellow;
    }
 

Código HTML:

<div id="lol">
            hola lol    
    </div>
    <div class="pig">
            hola pig
    </div>
 

Solución:

Código CSS:

.row-1 { /* some styles for row 1 */ }
.row-1.scrolled { 
   box-shadow: 0 1px 3px rbga(0, 0, 0, 0.4);
   opacity: 0.9;
}
 

Then simply toggle that scrolling class:

Código Javascript:

$(document).scroll(function(){
     $('.row-1').toggleClass('scrolled', $(this).scrollTop() > 1);
 });