gpt4 book ai didi

javascript - 当用户滚动时改变 margin-top

转载 作者:行者123 更新时间:2023-11-29 19:55:10 25 4
gpt4 key购买 nike

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

到目前为止,这是我的代码:

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/

感谢帮助

最佳答案

你做错了,你想做的应该在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com