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

我有一个＃top-div显示“到站点的顶部”-text。当我做下面的代码它没有“其他”的作品 - 然后在滚动700px后显示div。使用jQuery.scroll检测滚动高度（）

但“其他”不起作用，它根本不会显示。当您再次滚动到站点的顶部时，应该隐藏div。

任何帮助表示赞赏。

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

来源

2013-03-24 BTB

所以，如果你离开了'else'子句的代码工作，除了顶格不会再隐藏，当你添加其他它停止工作的条款？ – 11684 2013-03-24 11:31:33

控制台中的任何错误？ – 11684 2013-03-24 11:32:07

是的，当我添加“其他”时，它实际上只显示如果刷新网站，而其滚动到底部。但如果你向上滚动，它不会隐藏。。没有错误:( – BTB 2013-03-24 11:35:11

我怀疑如预期，当您滚过700像素边界来回动画效果已排队的动画不能正常工作。

当使用动画时，告诉jQuery“放弃你现在正在做的事情，停止动画队列并按照你现在所说的去做”是很重要的。这意味着，你将不得不链.animate后面.stop方法（read about .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/

来源

2013-03-24 11:52:11 Terry

工作就像一个魅力谢谢你，我不知道那:-) – BTB 2013-03-24 12:04:11

哦，我忘了提，动画不会实际工作也很好！ - 因为'.scroll（）'事件被触发非常频繁，当用户滚动页面，导致不透明度为突然切换 - 因此而不是迫使浏览器跳转到最后出场的，请尝试使用'.stop（真，假）'。 – Terry 2013-03-24 12:09:55

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

回答

相关问题