我正在尝试在滚动时检查元素是否在我的视口内。 如果它在我的视口之外,我会添加一个将元素固定到顶部的类。
我用来确定元素是否在视口之外的函数是:
isElementInViewport : function(el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
我添加了一个触发此功能的滚动事件:
$(window).on('scroll', function(event){
testObject.isElementInViewport(event.target);
}
这里的问题是,在滚动时,我的联想瑜伽的CPU会变得疯狂。 我试过了:
polling
,间隔为timeout function
和variable outside the event function scope
切换特定时间间隔这两种方法都有效,但我需要一种方法来最小化性能影响,因为我使用它的页面已经有JS的LOADS工作。 我还需要在它到达视口之外时将其固定到顶部,而不是几毫秒之后。
有没有针对此的低性能解决方案? 这可以仅在CSS中完成吗?
我注意到我没有问我的问题。 下面的当前答案正在起作用,但当我向上和向下滚动时,会产生相同的巨大性能影响:
我需要防止脚本需要这么多CPU能力!
答案 0 :(得分:0)
从jQuery – test if element is in viewport (visible on screen)
复制HTML
$.fn.isOnScreen = function() {
var win = $(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(window).scroll(function() {
if ($('.orange').isOnScreen() === true) {
console.log("Element is in viewport")
}
});
JQuery的
$scope.buttonClicked = function(){
$scope.activeButton = !$scope.activeButton;
}
<强> Fidde 强>