使用鼠標滾輪和側邊欄更改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位置

回答

相關問題