问题描述
|
我需要在使用鼠标滚轮或侧栏向下或向上滚动时,我的div逐渐更改Y位置(例如,向上或向下50px)。我在Javascript / Jquery中需要这个。
我尝试使用此代码,但仅适用于向下滚动(“向下滚动和向上滚动”功能运行良好,只有动画部分无法正常工作):
更新:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $(\"body\").offset();
$(window).scroll(function ()
{
var docScrollTop = $(\'body,html\').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$(\"#legend\").stop().animate({ marginTop: \"+=50px\",},\'slow\',\"eaSEOutCirc\" );
}
else
{
$(\"#legend\").stop().animate({ marginTop: \"-=50px\",\"eaSEOutCirc\" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $(\"#legend\").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $(\"#legend\").offset().top;
});
谢谢
解决方法
您可以使用
$(window).scroll(function() {
// Your scroll code here
});
每当用户在页面上滚动时都可以抓取。
接下来,您要更改div
的y值。
如果将div
定位为绝对值,则仅更改其最高值。
$(\'my-div\').top = original-top-value + $(window).pageYOffset;
, 我相信您需要保持div始终显示,即使用户向下滚动也是如此。如果是这种情况,则只能使用CSS来完成:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
z-index,top和left的值是虚拟值。与您的人一起改变他们。
更新:
由于CSS解决方案对您不起作用,因此下面是JS中的示例工作:http://jsfiddle.net/qCtt5/