3

我正在尝试使用垂直滚动来显示对象A。这个想法是，如果我的滚动高度大于scrollHeight (15)，那么在1.2 秒后，A就会出现。然后，当我滚动回顶部时，A 将隐藏。

现在的问题是，如果我不使用 clearTimeout，setTimeout将忽略条件：if (scroll >= scrollHeight)

当我使用clearTimeout时，它似乎只在我快速滚动或它不起作用时才有效。

这是我的代码。

var scrollHeight = 15;

$(window).scroll(function() {
    var scroll = getCurrentScroll();
    var delayThis;

    if ( scroll >= scrollHeight ) {
        delayThis = setTimeout(function(){

        //Display **A**... 

        }, 1200);

       }
       else{
        // Hide **A** ...
        clearTimeout(delayThis);
        }
  }

非常感谢您的帮助！！

4

2 回答 2

1

您必须告诉脚本消息是否已经显示，这样可以避免多次延迟。下面是我正在谈论的工作版本。我希望这会有所帮助。

var scrollHeight = 15;
var message = $( ".message" ); 
var messagestatus = false;
var scrollposition;

$(window).scroll(function() { 
    scrollposition = $(document).scrollTop();
    
    if ( scrollposition >= scrollHeight ) {
        if ( messagestatus == false ) {
            setTimeout(function(){

                message.show();
                messagestatus = true;
                
            }, 1200);
        }

    } else{
        message.hide();
        messagestatus = false;
    } 
});
.message {
    display: none;
    position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>top</p>
<div class="message">
    Show!
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br />
<p>bottom</p>

于 2015-04-26T02:31:55.730 回答
0

您需要将 delayThis 放在事件之外，加上 scrollHeight。因为否则它不再存在。现在，您拥有它仅在该滚动事件本地的位置……而不是正在进行的事件。

另外...当您滚动时，您将一遍又一遍地设置超时。因此，在设置它之前，您可能需要确保 delayThis 尚未设置。

于 2015-04-26T01:19:55.050 回答