(function() {
window.onscroll = function () {
var sideBars = document.getElementsByClassName("sideBar");
var y = window.pageYOffset;
var threshold = 200;
var marge = 15;
if(threshold - y >= marge) {
for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + (threshold - y) + "px ;"; }
} else {
for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + marge + "px ;"; }
}
};
})();
.sideBar { position: fixed; top: 200px; width: 300px; background-color: lightgreen; }
#sideBarLeft { left: 10px; }
<div id="sideBarLeft" class="sideBar">
<p>Quack.</p>
</div>
<div style="height: 1800px; background-color: yellow"></div>
我用纯 Javascript 编写了一个小函数来在用户滚动页面时滑动元素。
(function() {
window.onscroll = function () {
var sideBars = document.getElementsByClassName("sideBar");
var y = window.pageYOffset;
var threshold = 200;
var marge = 15;
if(threshold - y >= marge) {
for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + (threshold - y) + "px ;"; }
} else {
for(var i=0; i<sideBars.length; i++) { sideBars[i].style = "top: " + marge + "px ;"; }
}
};
})();
它工作得很好,但随着用户滚动页面,浏览器似乎变得越来越慢。我怀疑某处有内存泄漏或有问题,但我不知道是什么,因为我不是 JS 专家
你们中的一些人可以启发我这个问题吗?
(尝试使用 mozilla firefox 38.0.5)
stackoverflow 代码片段表明不会重现该问题。
编辑
Ahmed 建议使用 translateY CSS 函数而不是重置“top”属性。这样,它就像一个魅力:
(function() {
window.onscroll = function () {
var sideBars = document.getElementsByClassName("sideBar");
var y = window.pageYOffset;
var origin = 200;
var marge = 15;
var offset = origin-y >= marge ? -y : marge-origin;
for(var i=0; i<sideBars.length; i++) { sideBars[i].style.transform = "translateY(" + offset + "px"; }
};
})();
最佳答案
除了 Marcos 回答之外,每次用户滚动时,top
都会重置,并且会出现重绘。你应该使用translate
。
您可以在此处阅读更多信息 https://css-tricks.com/tale-of-animation-performance/
关于Javascript滑动元素性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31206712/