JQuery fadeTo（）

Question

到目前为止，我得到了这段代码：

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
    } 

这个想法是一个低透明度的菜单，当我向下滚动时，它会淡入，但问题是当我向上滚动到<400时，我无法将其恢复到低不透明度（0.7）。

我一直在寻找，但我找不到我的解决方案。

有什么想法吗？

提前致谢。

Answer 1

那里有几个问题。首先，你永远不会检查scrollTop是否为<= 400，所以当然不会再回来了。

第二个是，即使使用了您的代码，只要窗口滚动，您就会不断重新应用fadeTo，即使它已经> 400。

var fadedIn = false;
$(window).scroll(function() {
    var thisScroll = $(this).scrollTop();
    if (thisScroll > 400 && !fadedIn) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
        // Or with a stop: $( ".top-bg" ).stop().fadeTo("slow", 0.99);
        fadedIn = true;
    } else if (thisScroll <= 400 && fadedIn) {
        $( ".top-bg" ).fadeTo("slow", 0.7);
        // Or with a stop: $( ".top-bg" ).stop().fadeTo("slow", 0.7);
        fadedIn = false;
    }
});

Answer 2

试试这个

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
    }else if($(this).scrollTop() <= 400)
{
        $( ".top-bg" ).fadeTo("slow", 0.7);
}