jquery - 在滚动时更改边距顶部

Question

我在 div 上有负边距，但我想更改滚动时的负边距，直到负数达到 0。

从：

margin:-150px 0 0 0;

至：（滚动）

margin:0px 0 0 0;

我认为这是我在 StackOverflow 上搜索并发现的某种视差效果： Change margin top of div based on window scroll

我想到了这样的事情，但一定有更简单的事情

$(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'}); }
});

--

我用 html / css 基础创建了一个小提琴

小提琴：http: //jsfiddle.net/qSe4e/

--

非常感谢你

Answer 1

尝试使用一点数学来自动生成所有可能性（类似于您的尝试，但使用单行而不是每个可能性一行。

示例：http: //jsfiddle.net/qSe4e/9/

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

Answer 2

像这样做

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

演示小提琴