Heyo，
我希望你们能帮助我。我试图建立一个包含广告的盒子。 revealer-box（让我们称之为）位于内容之间，广告具有固定的位置，位于内容后面（无法通过z-index和{{1隐藏}}）。如果屏幕上显示display: none，则广告会获得revealer-box。但唯一可见的地方是display: block，因为所有其他元素的revealer-box都较高。因此z-index的工作方式类似于您查看的窗口。这一切都已完成，而不是问题。唯一的问题是它在移动设备上有点迟钝（Galaxy S4，Androdid 5.0.1，Chrome）。好像它与我的jQuery有关。让我在这里发布：
revealer-box正如您所看到的，它仅针对移动设备显示。 if($(window).width() < 601) {
showElem(".revealer-box");
} else {
hideElem(".revealer-box");
hideElem(".revealer-ad");
}
$(window).resize(function() {
if($(window).width() < 601) {
showElem(".revealer-box");
} else {
hideElem(".revealer-box");
hideElem(".revealer-ad");
}
});
$(window).scroll(function() {
if( isOnScreen(".revealer-box") && $(".revealer-box").hasClass("is-active") ) {
showElem(".revealer-ad");
if(flgCallGA) {
callGA.call($(".revealer-ad"));
flgCallGA = false;
}
} else {
hideElem(".revealer-ad");
}
});
function isOnScreen(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
var elemHeight = $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
function showElem(elem) {
if( !$(elem).hasClass("is-active") ) {
$(elem).addClass("is-active");
}
}
function hideElem(elem) {
if( $(elem).hasClass("is-active") ) {
$(elem).removeClass("is-active");
}
}
- 类仅提供is-active。而已。我希望你能帮助我。
此致
努努
答案 0 :(得分：0)
斯坦已经指出，＆＃34;滚动＆＃34;事件在一个简单的卷轴上被激活了几百次。滚动时删除事件侦听器，并在短时间后重新添加。
function addListener(){
window.addEventListener("scroll", scrolling);
}
function scrolling(){
//remove the event listener
window.removeEventListener("scroll",scrolling);
window.setTimeout(addListener,500);
}
addListener();