Änderung margin-top auf Scroll

Question

ich habe eine negative Marge auf einem div, aber ich möchte die negative Marge auf Blätter ändern, bis die negativen 0.

aus erreicht:

margin:-150px 0 0 0; 

um: (auf scroll)

margin:0px 0 0 0; 

ich denke, es ist eine Art von Parallaxe-Effekt ist, wo i Sind für die Suche und fand diese auf Stackoverflow: Change margin top of div based on window scroll

ich so etwas gedacht, aber es muss sein, etwas leichter

$(window).scroll(function(){ 
if ($(window).scrollTop() >= 1){ $('#three').css({margin:'-149px 0 0 0px'}); } 
if ($(window).scrollTop() >= 2){ $('#three').css({margin:'-148px 0 0 0px'}); } 
if ($(window).scrollTop() >= 3){ $('#three').css({margin:'-147px 0 0 0px'}); } 
if ($(window).scrollTop() >= 4){ $('#three').css({margin:'-146px 0 0 0px'}); } 
else { $('#three').css({margin:'-150px 0 0 0px'}); } 
}); 

- mit dem

ich eine Geige erstellt html/css basis

geige: http://jsfiddle.net/qSe4e/

-

vielen Dank im fortgeschrittenen

Answer 1

Versuchen Sie, ein wenig Mathematik mit automatisch alle die Erzeugung Möglichkeiten (ähnlich wie bei Ihrem Versuch, aber mit einer einzigen Zeile statt einer für jede Möglichkeit.

Beispiel: http://jsfiddle.net/qSe4e/9/

$(window).scroll(function(){ 
    var fromTop = $(window).scrollTop(); 
    $("#three").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px'); 
}); 

Answer 2

Machen Sie es wie diese

$(document).scroll(function() { 
$("#three").animate({margin: "0px 0px 0px 0px"}, 3000); 
}); 

Demo Fiddle