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

我需要在用鼠标滚轮或边栏向下滚动或向上滚动时，我的div会逐渐增加Y位置（例如上下50px）。我需要这个在JavaScript/JQuery中。使用鼠标滚轮和侧边栏更改Div Y位置

我试试这个代码，但只适用于向下滚动（滚动向下和向上功能运作良好，只有动画部分工作是错误的）：

UPDATE：

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; 

});

由于

来源

2011-06-13 Sbml

您可以使用

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

可以在用户在页面上滚动时抓取。

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

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

来源

2011-06-13 10:43:18

我有一个问题，用这种方法，我需要我的div保持其他分区中（我的网站容器），它调整窗口大小并调整内容的高度（或者在这种情况下滚动）。 – Sbml 2011-06-13 11:37:31

我相信你需要的是让div始终显示，即使用户向下滚动。如果是这种情况，那么它可以只用CSS来完成：

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

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

UPDATE：

由于CSS的解决方案将不适合你，这里是JS工作示例writter：http://jsfiddle.net/qCtt5/

来源

2011-06-13 10:51:24

是的，但是位置：固定忽略布局，我想要移动的div在页面中的其他div内。 – Sbml 2011-06-13 10:55:57

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

回答

相关问题