Question

我有一个#top-div显示“到站点顶部” - 文本。当我执行以下代码时，它没有“else” - 然后在滚动700px后显示div。

但是“其他”不起作用，根本不会显示。当您再次向上滚动到网站顶部时，应隐藏div。

任何帮助表示感谢。

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").animate({"opacity":"0.6"});
    }
    else {
        $("#top").animate({"opacity":"0"});
    }

Answer 1

我怀疑动画没有按预期工作，因为当您来回滚动700px边界时，动画效果已经排队。

使用动画时，告诉jQuery“放弃你现在正在做的事情，停止动画队列并像你现在所说的那样做”非常重要。这意味着您必须将.animate方法（read about .stop()）后面的.stop链接起来，即：

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").stop(true, false).animate({"opacity":"0.6"});
    }
    else {
        $("#top").stop(true, false).animate({"opacity":"0"});
    }
}

.stop(true, false)方法强制jQuery清除动画队列，但不强制元素跳转到动画结尾 - 这是因为.scroll()事件在用户被触发多次滚动。如果我们使用.stop(true, true)，那么过渡将是突然的。

替代方案包括：

Debouncing or throttling .scroll()活动
不要使用.animate()，只需使用CSS设置不透明度并利用CSS过渡，例如transition: opacity .25s ease-in-out。

这是一个概念验证小提琴 - http://jsfiddle.net/teddyrised/zdpMd/

使用jQuery.scroll（）检测滚动高度

1 个答案: