JQuery Vertical Slideアニメーションが移動しません

JQuery関数を使用して、垂直にスクロールするとナビゲーションバーが上下にスライドします。このアイデアは、常にnavbarをクライアントウィンドウの上部から20ピクセルだけ保持することです。ユーザーが上下にスクロールすると、ナビゲーションバーは、クライアントウィンドウの上部から20ピクセルに戻るまでスライドします。JQuery Vertical Slideアニメーションが移動しません

私の問題：それはちょうど血まみれの動きを笑うことはありません。私は何を間違えたのですか？ここで

は、jQueryのコードと私のJSFiddleである：ここではhttp://jsfiddle.net/wLga8/

は私のコードです：

function moveDistanceEaseIn(/*HTML Element*/ ele, /*int|float*/ dist, /*Function*/ funct) 
{ 
    ele = $(ele); 
    var min = dist*0.01; 

    // kill an already running animation 
    if (ele.data("animInterval")) 
     clearInterval(ele.data("animInterval")); 

    var step = function() 
    { 
     if (dist <= min) 
     { 
     ele.data("animInterval", false); 
     clearInterval(interval); 
     return; 
     } 

     var stepMove = dist*0.1; 
     dist  -= stepMove; 
     funct(ele, dist, stepMove); 
    }; 

    var interval = setInterval(step, 30); 
    ele.data("animInterval", interval); 
} 

function moveToPointEaseIn(/*HTML Element*/ ele, /*int|float*/ curPoint, /*int|float*/ point, /*Function*/ funct, /*bool*/ signed) 
{ 
    ele  = $(ele); 
    var dist = (signed == true) ? curPoint - point:Math.abs(curPoint - point); 
    moveDistanceEaseIn(ele, dist, funct); 
} 

$(document).ready(function() 
{ 
    $(window).scroll(function() 
    { 
     var nav = $("#aa"); 
     moveToPointEaseIn(nav, nav.position().top, $(window).scrollTop()+20, function(ele, dist, stepMove) 
     { 
     ele.css("top", ele.position().top+stepMove); 
     }, true); 
    }); 
});

そして、いくつかの例のHTML：

<body style="height: 3000px;"> 
    <div id="aa" style="position: absolute; left: 0px; top: 20px; width: 200px; height: 500px; background-color: red;"></div> 
</body>

出典

2011-12-31 Jake M

あなたの質問にコードを追加しました。 SOに関する質問は自己完結型でなければなりません。これは、他のサイトがダウンした場合に備えて、その質問がより検索可能になるようにします。 –

[this]（http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/）のような意味ですか？ [ここにある]（http://jsfiddle.net/dafastestfingers/wLga8/5/）デモ –

なぜあなたの関数のISN私は確かではありませんよ働いていない。フィドルはjqueryを使用するように設定されていませんでしたが、設定しても効果はありません。

しかし、これはあなたがしている何をしているようだ後......、それはあなたの問題のすべてを解決する場合

<body style="height: 3000px;"> 

<div id="aa" style="position: absolute; left: 0px; top: 20px; width: 200px; height: 500px; background-color: red;"> 

</div>

var $scrollingDiv = $("#aa"); 
$(window).scroll(function(){    
    $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 20);    
});

DEMO

出典

2011-12-31 02:56:23 Scott

わからないけどこれらはあなたのコードをさらにデバッグできるように少なくともあなたを動かすべきです：

（あなたが掲示一つに欠けている）あなたのフィドルにごstep機能の初回実行時にjQueryライブラリを追加し、値が負です：-100と-1。これに
```
if (dist <= min) 
```
：
は
```
if (Math.abs(dist) <= Math.abs(min)) 
```
アニメーションはまだ間違って見えますこれはあなたの<=テストは、私はこの行を変更することにより、この問題を回避ハッキング

最初の反復であなたのアニメーションを殺すことを意味します少なくともアニメーション化されています:)

ここで修正されたフィドルです：http://jsfiddle.net/wLga8/4/

出典

2011-12-31 02:57:29

JQuery Vertical Slideアニメーションが移動しません

答えて

関連する問題