使用鼠标滚轮和侧边栏更改 div Y 位置答案

【问题标题】：Change Div Y Position with mouse wheel and sidebar使用鼠标滚轮和侧边栏更改 div Y 位置
【发布时间】：2011-06-13 10:36:16
【问题描述】：

当我使用鼠标滚轮或侧边栏向下或向上滚动时，我需要它，我的 div 会逐渐更改 Y 位置（例如 50px up 或 down ）。我在 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;

});

谢谢

【问题讨论】：

标签： javascript jquery position mousewheel

【解决方案1】：

你可以使用

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

在用户滚动页面时抓取。

接下来您要更改 div 的 y 值。如果div 是绝对定位的，这只是改变了它的最高值。

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

【讨论】：

我对这种方法有一个问题，我需要我的 div 留在其他 div （我的网站容器）中，以调整窗口大小为中心并调整内容的高度（或在这种情况下滚动）。
此解决方案是否需要页面实际滚动？还是只供用户使用滚轮？

【解决方案2】：

我相信您需要保持 div 始终显示，即使用户向下滚动也是如此。如果是这样的话，那么它可以只用 CSS 来完成：

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

z-index、top 和 left 的值是虚拟值。用你的来改变它们。

更新：

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

【讨论】：

是的，但是 position:fixed 会忽略布局，我要移动的 div 位于页面中心的其他 div 内。