更改頁面加載時的字體顏色，而不僅僅是滾動

Question

我有一個標題，要為我的網站的每個頁面插入一個包含標題的標題，標題的字體顏色設置為黑色，但是在我的某些頁面上，我的英雄圖像的標題背景透明性為0 ，我需要在頁面加載時將顏色更改為白色，然后在滾動時將顏色更改為黑色，

當我滾動並最初也保持白色時，我必須將.svg源更改為黑色版本，它們也不會從白色開始。

一旦我向下滾動然后回到頂部，它就可以工作，但是我不確定如何使它從白色開始-我嘗試以某種方式添加.onload，但是我卻沒有用，任何幫助都是感謝！

// Image Elements of Header

jQuery(document).ready(function() {
var initialSrcProfile = "assets/images/profileicon-white.svg";
var scrollSrcProfile = "assets/images/profileicon-black.svg";
var initialSrcLogo = "assets/images/logo-white.png";
var scrollSrcLogo = "assets/images/logo-black.png";

$(window).scroll(function() {
    var value = $(this).scrollTop();

        if (value > 10)
  $(".profile-icon").attr("srcset", scrollSrcProfile);
    else
  $(".profile-icon").attr("srcset", initialSrcProfile);

        if (value > 10)
  $(".logo").attr("src", scrollSrcLogo);
    else
  $(".logo").attr("src", initialSrcLogo);

});
});

// Text Elements of Header

$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
  $(".navwrap a span").css("color", "black");
  $("#login-break").css("color", "black");
} if (scroll < 1) {
  $(".navwrap a span").css("color", "white");
  $("#login-break").css("color", "white");
}
});
});

Answer 1

您要做的是將用於更新標頭的代碼放在單個函數中，然后在文檔就緒和滾動時調用該函數。 如果它在一個函數中，那么您可以將單個函數用於兩個函數。

let updateHeader = function() {

  var initialSrcProfile = "assets/images/profileicon-white.svg";
  var scrollSrcProfile = "assets/images/profileicon-black.svg";
  var initialSrcLogo = "assets/images/logo-white.png";
  var scrollSrcLogo = "assets/images/logo-black.png";

  var scroll = $(window).scrollTop();

  // Image Elements of Header
  if (scroll > 10) {
    $(".profile-icon").attr("srcset", scrollSrcProfile);
    $(".logo").attr("src", scrollSrcLogo);
  } else {
    $(".profile-icon").attr("srcset", initialSrcProfile);
    $(".logo").attr("src", initialSrcLogo);
  }

  // Text Elements of Header
  if (scroll > 0) {
    $(".navwrap a span").css("color", "black");
    $("#login-break").css("color", "black");
  }
  if (scroll < 1) {
    $(".navwrap a span").css("color", "white");
    $("#login-break").css("color", "white");
  }
}

jQuery(document).ready(function() {
  updateHeader();
  $(window).scroll(updateHeader);
});

瀏覽器可能會先加載默認顏色，然后顯示它們，然后運行腳本來更新它們。 這可能會引起某種形式的閃爍，但是在大多數情況下會非常快。 如果這是一個問題，那么您要確保初始CSS完全按照加載時的樣式設置樣式。 恐怕這可能是最好的。