我试图让 div 在用户向下滚动页面时以相同数量的像素向上滚动。例如,在 Google Chrome 中,使用鼠标滚轮时,它会以大约 20px 的间隔向下滚动。但是当您使用 handle 向下滚动时,滚动量会有所不同。
这是迄今为止我的代码:
var scrollCtr = 50;
$(window).scroll(function(){
scrollCtr = scrollCtr - 20;
$('div.nexus-files').css('margin-top', scrollCtr + 'px');
});
这有一些问题:
- 用户滚动效果各不相同
- 如果向下滚动,需要从 margin-top 中减去,如果向上滚动,则需要从 margin-top 中添加
这是一个例子: http://www.enflick.com/
感谢您的帮助
最佳答案
您的做法是错误的,您尝试执行的操作应该在 div.nexus-files
上使用 position:fixed
来完成
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 的选择器来获取特定元素,而不是基于类
我再说一遍 - 这不是你应该做的事情
关于javascript - 当用户滚动时更改 margin-top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16257371/