替換滾動上的img src

Question

我試圖替換logo-text-black src屬性，以便svg img在用戶滾動時發生更改。是否有可能將此添加到我的當前腳本？

IMG /徽標文本white.svg //最高狀態

IMG /徽標文本black.svg //滾動狀態

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header"> 
    <a href="#top"><img class="logo" src="img/logo.svg"></a> 
    <a href="#top"><img class="logo-text" src="img/logo-text-white.svg"> 
</a> 
</div> 
</nav> 

JS

$(window).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 100) 
    $(".navbar-default").css("background", "white"); // Scroll State 
    else 
    $(".navbar-default").css("background", "transparent"); // Top state 
}); 

Answer 1

要更換圖像源，你可以使用jQuery .attr方法：

var initialSrc = "img/logo.svg"; 
var scrollSrc = "img/logo-text-black.svg"; 

$(window).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 100) 
     $(".logo").attr("src", scrollSrc); 
    else 
     $(".logo").attr("src", initialSrc); 
}); 

這種方法只需要一個<img>與logo類的HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header"> 
    <a href="#top"><img class="logo" src="img/logo.svg"></a> 
</div> 
</nav> 

Answer 2

忽略的事實，簡單的答案回答所問的問題是，在使用jQuery時，您使用.attr函數更改元素的屬性，這就是我將如何去完成您的問題中提出的任務。

首先，我將把所有這些放在一個函數中（主要是爲了防止干擾，將變量和邏輯從其他頁面腳本中分離出來）。

我的下一個建議是在兩個或多個CSS類中實現背景顏色變化。這有利於簡化JavaScript，並將樣式部分保留在樣式區域中。

接下來，我喜歡爲我的「魔法詞」創建常量變量，這樣如果我稍後改變使用的詞，我只需要在代碼中更改一次該詞，而不是在任何地方使用該詞。

// cache the magic words 
const DARK = 'dark'; 
const LIGHT = 'light'; 

我會將圖像源放到一個對象中，其中的鍵是與這些源關聯的魔術字。這可以在以後快速方便地查找。

// define our different sources for easy access later 
const sources = { 
    light: "http://via.placeholder.com/150x50/fff/000?text=logo", 
    dark: "http://via.placeholder.com/150x50/000/fff?text=logo" 
}; 

之後，我會預先加載圖像，以防止第一次更改源時的視覺延遲。

// pre-load the images to prevent jank 
document.body.insertAdjacentHTML('beforeend', ` 
    <div style="display: none!important"> 
    <img src="${ sources[LIGHT] }"> 
    <img src="${ sources[DARK] }"> 
    </div> 
`); 

需要注意的是執行任務上滾動可能會導致問題是很重要的。

的主要問題是：

• 的影響可以是阻塞的，這意味着處理繁重的任務將導致「滾動JANK」。這是與頁面滾動方式存在視覺不一致的地方。
• 當滾動事件偵聽器正在執行時，可能會觸發滾動事件。這可能會導致兩次執行互相干擾。

打擊這些問題很簡單：

• 爲了防止滾動JANK，包處理程序在調用setTimeout。這將在處理程序的執行移動到堆棧的頂部在下一儘早被執行。

• 爲了防止多個處理程序從同時運行，限定處理程序之外的「狀態」變量來跟蹤執行狀態。

  此變量將當事件處理程序正在執行和假當沒有事件處理程序的執行被設置爲true。當處理程序開始執行，檢查狀態變量的值：

  • 如果是true，取消該處理程序調用的執行。
  • 如果false，將狀態設置爲true並繼續。

  只要確保無論您何時退出該功能，還可以重置狀態變量。

  // define our scroll handler 
      const scroll_handler = _ => setTimeout(_ => { 
      // if we are already handling a scroll event, we don't want to handle this one. 
      if (scrolling) return; 
      scrolling = true; 
  
      // determine which theme should be shown based on scroll position 
      const new_theme = document.documentElement.scrollTop > 100 ? DARK : LIGHT; 
  
      // if the current theme is the theme that should be shown, cancel execution 
      if (new_theme === theme) { 
       scrolling = false; 
       return; 
      } 
  
      // change the values 
      logo.src = sources[new_theme]; 
      el.classList.remove(theme); 
      el.classList.add(new_theme); 
  
      // update the state variables with the current state 
      theme = new_theme; 
      scrolling = false; 
      }); 
  

之後，只需指定事件偵聽器。

這是一起：

function navbarSwitcher(el) { 
 
    // cache the reference to the logo element for use later 
 
    const logo = el.querySelector('.logo'); 
 
    
 
    // cache the magic words 
 
    const DARK = 'dark'; 
 
    const LIGHT = 'light' 
 

 
    // define our state variables 
 
    let scrolling = false; 
 
    let theme = LIGHT; 
 

 
    // define our different sources for easy access later 
 
    const sources = { 
 
    light: "http://via.placeholder.com/150x50/fff/000?text=logo", 
 
    dark: "http://via.placeholder.com/150x50/000/fff?text=logo" 
 
    }; 
 
    
 
    // pre-load the images to prevent jank 
 
    document.body.insertAdjacentHTML('beforeend', ` 
 
    <div style="display: none!important"> 
 
     <img src="${ sources[LIGHT] }"> 
 
     <img src="${ sources[DARK] }"> 
 
    </div> 
 
    `); 
 

 
    // define our scroll handler 
 
    const scroll_handler = _ => setTimeout(_ => { 
 
    // if we are already handling a scroll event, we don't want to handle this one. 
 
    if (scrolling) return; 
 
    scrolling = true; 
 

 
    // determine which theme should be shown based on scroll position 
 
    const new_theme = document.documentElement.scrollTop > 100 ? DARK : LIGHT; 
 

 
    // if the current theme is the theme that should be shown, cancel execution 
 
    if (new_theme === theme) { 
 
     scrolling = false; 
 
     return; 
 
    } 
 

 
    // change the values 
 
    logo.src = sources[new_theme]; 
 
    el.classList.remove(theme); 
 
    el.classList.add(new_theme); 
 

 
    // update the state variables with the current state 
 
    theme = new_theme; 
 
    scrolling = false; 
 
    }); 
 

 
    // assign the event listener to the window 
 
    window.addEventListener('scroll', scroll_handler); 
 
} 
 

 
// attach our new plugin to the element 
 
navbarSwitcher(document.querySelector('.wrap'));

body { 
 
    height: 200vh; 
 
} 
 
.wrap { 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
.wrap.light { 
 
    background-color: white; 
 
} 
 
.wrap.dark { 
 
    background-color: black; 
 
}

<div class="wrap light"> 
 
    <img class="logo" src="http://via.placeholder.com/150x50/fff/000?text=logo"> 
 
</div>