Question

我有一个div在520px之后出现在滚动上。每次我向下滚动，它似乎都会淡入，然后不断闪烁，就像它一遍又一遍地运行这个功能一样。我无休止地搜索了这个，我无法找到真正有效的修复方法。（它在Chrome上）。这是我的Jquery：

$(window).bind("scroll", function(e) {
e.preventDefault();
if ($(this).stop().scrollTop() > 520) {
    $("#fadeblock").fadeIn();
} else {
    $("#fadeblock").stop().fadeOut();
}
});

这是我的CSS

 #fadeblock {
display:none;
position:fixed;} 

 #sidebar {
    width:200px;
    height:200px;
    padding:450px 20px 20px 20px;
    position:absolute;
    margin-left:3%;
}

HTML：

 <div id="fadeblock">
 <div id="sidebar">
 <div id="title">{Title}</div>
<div id="desc">{Description}</div>
<div id="links">
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
</div>

Answer 1

事实上，您的代码确实会一次又一次地运行该功能。

一种解决方案是设置变量以跟踪DIV的状态：

var pos=0, fadedIn=false;

$(window).on("scroll", function(e) { //usually, just use: $(window).scroll(function(){
    e.preventDefault(); //this line probably unnecessary
    pos = $(this).scrollTop();
    if (!fadedIn &&  pos > 520) {
        $("#fadeblock").fadeIn();
        fadedIn = true;
    } else if (fadedIn) {
        fadedIn = false;
        $("#fadeblock").fadeOut();
    }
});

此外：

1）如果您使用的是jQuery版本＆gt; 1.7，使用.on()代替.bind()

2）除非你有充分的理由这样做，否则不要在e.preventDefault()上使用window.scroll()

另见：

http://davidwalsh.name/javascript-debounce-function

How to implement debounce fn into jQuery keyup event?

滚动时闪烁的jquery div？

1 个答案: