I currently have a negative margin set on a div, but I am looking to gradually change this negative margin to 0 as the user scrolls down.
From:
margin:-150px 0 0 0;
To: (on scroll)
margin:0px 0 0 0;
I believe this effect is similar to parallax scrolling, and I came across a solution on StackOverflow: Change margin top of div based on window scroll
However, I feel like there might be a simpler way to achieve this.
$(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'}); }
});
--
I have created a fiddle with the basic HTML/CSS setup for reference.
Fiddle: http://jsfiddle.net/qSe4e/
--
Thank you in advance for your help!