我有一个 JQuery 函数，它使导航栏在您垂直滚动时向上或向下滑动。这个想法是始终保持导航栏距离客户端窗口顶部 20 像素。当用户向上或向下滚动时，导航栏会滑动，直到它回到距客户端窗口顶部 20 像素的位置。
我的问题:它只是不会移动，哈哈。我做错了什么？
这是我的带有 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>
最佳答案
我不确定为什么您的功能不起作用。 fiddle 未设置为使用 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 );
});
关于javascript - jQuery垂直滑动动画不动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8685798/