替换滚动上的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>