[英]Change margin-top as user scrolls
我试图让一个 div 以与用户向下滚动页面相同的像素数量向上滚动。 例如,在 Google Chrome 中使用鼠标滚轮时,它会以大约 20px 的间隔向下滚动。 但是当您使用手柄向下滚动时,滚动量会有所不同。
到目前为止,这是我的代码:
var scrollCtr = 50;
$(window).scroll(function(){
scrollCtr = scrollCtr - 20;
$('div.nexus-files').css('margin-top', scrollCtr + 'px');
});
这有几个问题:
这是一个例子: http : //www.enflick.com/
谢谢您的帮助
你做错了,你想做的事情应该使用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 的选择器来获取特定元素而不是基于类
我再说一遍——这不是你应该做的事情
为什么不使用实际滚动偏移量作为参考或位置?
// or whatever offset you need
var scrollOffset = document.body.scrollTop + 20;
// jQuery
var scrollOffset = $("body").scrollTop() + 20;
终于明白了
这是我用来完成任务的代码。
大部分代码来自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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.