无需重新加载或更改页面即可更改网站图标

Question

我想知道是否可以在不重新加载或更改页面的情况下更改图标。 我想要在

document.body.scrollTop < 100

时拥有第一个图标，并且当它 > 100 时我想要拥有第二个图标，并且无需更改或重新加载页面。

我在互联网上没有找到任何相关信息，所以如果有人可以帮助我！

Answer 1

您可以通过更改favicon链接的

href

来更改favicon图标，页面不会重新加载：

var link = document.querySelector("link[rel~='icon']");

function runOnScroll(element){
    if(document.body.scrollTop > 100){
        element.href = '/assets/test2.ico';
    }else{
        element.href = '/assets/test1.ico';

    }
}

window.addEventListener(
  "scroll",
  () => runOnScroll(link),
  { passive: true }
);