在Javascript中通过add/removeclass换图。在初始页面滚动= 0 时怎么样？

Question

我目前正在尝试在用户从深色背景滚动到浅色背景时更改我的页眉徽标。我得到了 add/remove class 工作，但是当用户加载页面时图像不显示，因为它在滚动大于 0 像素滚动时执行。如何在用户尚未滚动的情况下显示页面加载的初始条件？

$(function() {
  var header = $(".logo");
  var about = $(".angle").offset().top;;
  $(window).scroll(function() {    
       var scroll = $(window).scrollTop();
       if (scroll >= about) {
          header.removeClass('lightLogo').addClass('darkLogo');
       } else {
          header.removeClass('darkLogo').addClass('lightLogo');
       }
    });   
});

Answer 1

最简单的方法可能是最初只添加 class，如下所示：

$(function() {
  var header = $(".logo").addClass('lightLogo');
  var about = $(".angle").offset().top;;
  $(window).scroll(function() {    
       var scroll = $(window).scrollTop();
       if (scroll >= about) {
          header.removeClass('lightLogo').addClass('darkLogo');
       } else {
          header.removeClass('darkLogo').addClass('lightLogo');
       }
   });   
});

现在页眉将在页面加载时以 .lightLogo 开头。