jquery - 如何根据滚动距离更改标题中的 Logo ？

Question

我试图根据我在页面上滚动的距离来更改页眉中的 Logo 。我试过使用诸如 Midnight.js 之类的东西，但我需要在滚动条上呈现完全不同的 Logo ，而不仅仅是更改图片的颜色。我试过这样做，但没有用。

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        var source= "images/whitelogo.png";
    } else {
        var source= "images/blklogo.png";
    }
    
}
</script>
<h1 id="myP" ><a href="index.html" ><img alt="logo" src=source; style="height:2.8em" /></a></h1>

感谢您的帮助!!!

Answer 1

您的代码中有几个错误。您不能在 script 标记之外使用 JavaScript 变量。

但是这段代码应该可以工作:

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        document.getElementById("logo").src = "images/whitelogo.png";
    } else {
        document.getElementById("logo").src = "images/blklogo.png";
    }
    
}
</script>
<h1 id="myP" ><a href="index.html" ><img alt="logo" id="logo" src=""; style="height:2.8em" /></a></h1>