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>
あなたの質問にコードを追加しました。 SOに関する質問は自己完結型でなければなりません。これは、他のサイトがダウンした場合に備えて、その質問がより検索可能になるようにします。 –
[this](http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/)のような意味ですか? [ここにある](http://jsfiddle.net/dafastestfingers/wLga8/5/)デモ –