我得到一个关于如果对象在我的屏幕内将被调用的函数的问题。但是当对象在我的屏幕内时,该函数被调用并且已触发警报。但是,如果我关闭警报并向下滚动,则会再次调用该事件。我不要那个。我该如何解决?
到目前为止我的代码:
<div id="wrapper">
scroll down to see the div
</div>
<div id="tester"></div>
JS
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!")
} else {
// do nothing
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
我想要的是If函数只会被调用一次而不是每次滚动都会被调用。
答案 0 :(得分:21)
尝试使用.one()
:
$(window).one('scroll',function() {
// Stuff
});
或者,取消内部事件的链接:
$(window).on('scroll',function() {
// After Stuff
$(window).off('scroll');
});
猜猜您可能需要此代码:
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!");
$(window).off('scroll');
} else {
// do nothing
}
});
答案 1 :(得分:7)
让我们尝试在javascript中解决您的问题,因为这里的所有答案都在jquery中。只要页面未刷新,您就可以使用全局变量,因为浏览器会保留其值。在函数外部声明的所有变量都称为全局变量,可以由任何函数访问。
window.onscroll = myScroll;
var counter = 0; // Global Variable
function myScroll(){
var val = document.getElementById("value");
val.innerHTML = 'pageYOffset = ' + window.pageYOffset;
if(counter == 0){ // if counter is 1, it will not execute
if(window.pageYOffset > 300){
alert('You have scrolled to second div');
counter++; // increment the counter by 1, new value = 1
}
}
}
&#13;
#wrapper,#tester {
width: 300px;
height: 300px;
border: 1px solid black;
padding: 10px;
}
#wrapper p {
text-align: center;
}
#tester {
border: 1px solid crimson;
}
#value {
position: fixed;
left: auto;
right: 40px;
top: 10px;
}
&#13;
<p id = "value"></p>
<div id="wrapper">
<p>scroll down to div to see the alert</p>
</div>
<div id="tester"></div>
&#13;
答案 2 :(得分:0)
$(window).on('scroll', function() {
if ($(document).scrollTop() >= $(document).height() / 100) {
$("#spopup").show("slow");
$(window).off('scroll');
} else {
$("#spopup").hide("slow");
}
});
function closeSPopup() {
$('#spopup').hide('slow');
}
为我工作
答案 3 :(得分:0)
注意:这里的所有答案都使用 $(window).off('scroll');
,这可能会影响您的其他脚本部分,就像在我的情况下,我的粘性导航停止工作。所以我使用了一个简单的标志 var 来解决我的问题。
var scrolled = false;
$(window).on('scroll', function() {
if (!scrolled) {
if (checkVisible($('#tester'))) {
alert("Visible!!!");
$(window).off('scroll');
} else {
// do nothing
}
scrolled = true;
}
});
答案 4 :(得分:-4)
当$ test在你的屏幕内时,删除事件监听器。
$(window).on('scroll',function() {
if (checkVisible($('#tester'))) {
alert("Visible!!!")
$(window).off('scroll');
} else {
// do nothing
}
});