2

我试图让一个 div 在用户向下滚动页面时以相同的像素数量向上滚动。例如，在 Google Chrome 中使用鼠标滚轮时，它会以大约 20 像素的间隔向下滚动。但是当您使用手柄向下滚动时，滚动量会有所不同。

到目前为止，这是我的代码：

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/

谢谢您的帮助

4

3 回答 3

2

你做错了，你想做的事情应该使用position: fixedondiv.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 的选择器来获取特定元素而不是基于类

我再说一遍——这不是你应该做的事情

于 2013-04-27T22:13:05.500 回答
1

为什么不使用实际的滚动偏移量作为参考或位置？

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

// jQuery
var scrollOffset = $("body").scrollTop() + 20;
于 2013-04-27T22:16:48.343 回答
0

终于明白了

这是我用来完成任务的代码。

大部分代码来自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);
}
}
于 2013-04-27T23:44:24.257 回答