8

div に負のマージンがありますが、負の値が 0 になるまでスクロールの負のマージンを変更したいと考えています。

から：

margin:-150px 0 0 0;

to: (スクロール時)

margin:0px 0 0 0;

StackOverflowでこれを検索して見つけたのは、ある種の視差効果だと思います： ウィンドウスクロールに基づいてdivのマージンを変更する

このようなことを考えましたが、もっと簡単なものがあるはずです

$(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/

--

よろしくお願いします

4

2 に答える 2

9

少しの数学を使用して、すべての可能性を自動的に生成してみてください (あなたの試みに似ていますが、可能性ごとに 1 行ではなく 1 行で作成します。

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

$(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $("#three").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});
于 2013-10-10T09:23:18.093 に答える
1

このようにしてください

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

デモフィドル

于 2013-10-10T08:28:05.833 に答える