Question

我正在尝试这个jQuery示例

(function ($) {
  $(document).ready(function(){

  // hide .navbar first
 // $(".masthead").hide();
  $(".masthead").css("background-color","inherit");
  // fade in .navbar
  $(function () {
    $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
      if ($(this).scrollTop() > 600) {
        $('.masthead').fadeIn();
        $(".masthead").css("background-color","black");
      } else if($(this).scrollTop === 0){
                $('.masthead').fadeIn();

      } else {
        $('.masthead').fadeOut();
      }
    });


  });

});
}(jQuery));

当我运行页面时显示菜单/导航栏，当我开始滚动时显示消失，并且在再次显示带有黑色背景的700像素导航栏后，我预计它会在我回到顶部后再次淡入。

if($(this).scrollTop === 0){
    $('.masthead').fadeIn();
}

但它没有奏效。那么scrollTop（）如何工作呢？我也试过设置scrollTop＆lt; 10，但没有成功。当我回到10像素或零时，如何使其工作？

Answer 1

您将函数体与0进行比较，而不是函数的实际结果（滚动值），因此：

if($(this).scrollTop === 0){
    $('.masthead').fadeIn();
}

应该成为这个：

if($(this).scrollTop() === 0){
    $('.masthead').fadeIn();
}

TL; DR

scrollTop与scrollTop()。

Navbar在返回顶部时淡入淡出

1 个答案:

TL; DR