Question

我需要当我向下或向上滚动鼠标滚轮或侧边栏时，我的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",}, 'slow', "easeOutCirc" );

        }
    });
    });

    $(window).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;
    });

    $(document).resize(function() 
    {
    sidebarScrollTop = $("#legend").offset().top;

});

由于

Answer 1

您可以使用

$(window).scroll(function() {
   // Your scroll code here
});

在用户滚动页面时抓取。

接下来，您要更改div的y值。如果div位于绝对位置，则只是更改其最高值。

$('my-div').top = original-top-value + $(window).pageYOffset;

Answer 2

我相信你需要的是即使用户向下滚动也要始终显示div。如果是这种情况，则只能使用CSS：

div {
  position: fixed;
  z-index: 100;
  top: 100px;
  left: 100px;
}

z-index，top和left的值是虚拟值。用你的改变。

更新：

由于CSS解决方案不适合你，这里有一个JS中的工作示例写：http://jsfiddle.net/qCtt5/

使用鼠标滚轮和侧边栏更改Div Y位置

2 个答案: