Question

我试图根据我在页面上滚动的距离来更改标题中的徽标。我试过使用像Midnight.js这样的东西，但是我需要在滚动上渲染一个完全不同的徽标，而不仅仅是改变图片的颜色。我试过这样做，但它不起作用。

<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变量。

此代码应该可以使用：

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用jquery .scrollTop（）函数获取当前位置。看看下面的问题

How can I determine the direction of a jQuery scroll event?

所以现在你需要做的就是调整你的徽标大小：）

Answer 3

您在问号中添加了jQuery，但我没有看到您在这里使用它（这没关系）。如果你想尝试使用jQuery，那么你可以使用类似的东西：

user.name

并按照以下方式更改HTML：

$(window).scroll(function() {
  if ($(this).scrollTop()>500) {
      $('#myP img').attr('src', 'images/whitelogo.png');
  } else {
      $('#myP img').attr('src', 'images/blklogo.png');
  }
});

但我喜欢将此类图像用作CSS规则中定义的元素背景。您可以创建一个CSS规则，如：

<h1 id="myP"><a href="index.html"><img alt="logo" src='images/blklogo.png' style="height:2.8em" /></a></h1>

我认为这有助于您保持组织和维护。

如何根据滚动的距离更改标题中的徽标？

3 个答案: