javascript - jQuery 的 FadeTo() 不适用于导航栏

Question

我试图在滚动顶部低于 100 时淡入 Bootstrap 的导航栏，并在滚动顶部高于 100 时淡出。我的代码未按预期工作，它只是在页面需要时淡出。错误在哪里？

jQuery 的代码:

$(document).scroll(function() {

      if($(this).scrollTop() < (100)){
        $(".navbar-default").fadeTo("slow", 1);
      }
      else{
        $(".navbar-default").fadeTo("slow", 0.5);
      }                 

    }); 

Answer 1

您的代码中有两个时刻:
1)您应该使用 $(window).scrollTop() 作为顶部滚动值
2)使用 .stop(true, true) 来防止动画出现任何故障

$(document).scroll(function() {
    if($(window).scrollTop() < 100){
       $(".navbar-default").stop(true, true).fadeTo("slow", 1);
    }
    else{
       $(".navbar-default").stop(true, true).fadeTo("slow", 0.5);
    }                 

    });