用戶滾動時更改 margin-top

Question

我試圖讓一個 div 以與用戶向下滾動頁面相同的像素數量向上滾動。 例如，在 Google Chrome 中使用鼠標滾輪時，它會以大約 20px 的間隔向下滾動。 但是當您使用手柄向下滾動時，滾動量會有所不同。

到目前為止，這是我的代碼：

var scrollCtr = 50;
$(window).scroll(function(){
   scrollCtr = scrollCtr - 20;
   $('div.nexus-files').css('margin-top', scrollCtr + 'px');
});

這有幾個問題：

1. 用戶滾動變化
2. 如果向下滾動，則需要從 margin-top 中減去，如果向上滾動，則需要添加到 margin-top

這是一個例子： http : //www.enflick.com/

謝謝您的幫助

Answer 1

你做錯了，你想做的事情應該使用position: fixed on div.nexus-files

div.nexus-files{position: fixed; top: 0;}

但無論如何 - 如果你仍然想知道你可以用滾動事件做什么 - 你最好進入文檔的scrollTop並將margin-top設置為相同的值

window.onscroll = function(event){
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    document.getElementById('nexus-files_id').style.marginTop = top+'px';
}

我使用純 Javascript 而不是 jQuery，因為當瀏覽器需要在很短的時間內（滾動期間）計算內容時，開銷可能至關重要。 [通過存儲對元素和文檔的引用可以更有效地完成......但你知道......）

我使用基於 id 的選擇器來獲取特定元素而不是基於類

我再說一遍——這不是你應該做的事情

Answer 2

為什么不使用實際滾動偏移量作為參考或位置？

// or whatever offset you need
var scrollOffset = document.body.scrollTop + 20;

// jQuery
var scrollOffset = $("body").scrollTop() + 20;

Answer 3

終於明白了

這是我用來完成任務的代碼。

大部分代碼來自http://enflick.com ，我對其進行了修改以適應我的個人情況。

jQuery(window).load(function(){
initParallax();
});

// parallax init
function initParallax(){
var win = jQuery(window);
var wrapper = jQuery('#wrapper');
var bg1 = wrapper.find('.nexus-files');
var koeff = 0.55;
if (bg1.length) {
    function refreshPosition(){
        var scrolled = win.scrollTop();
        var maxOffsetY1 = 450;
        var offsetY1 = scrolled * koeff;
        var offsetY2 = scrolled * koeff - (maxOffsetY1 * koeff - offsetY1);
        if (offsetY1 <= maxOffsetY1 * koeff - offsetY1) {
            bg1.css("margin-top", +-offsetY1+"px");
            //alert(+-offsetY1+"px");
        }
    }
    refreshPosition();
    win.bind('resize scroll', refreshPosition);
}
}