javascript - 我无法通过此脚本更改滚动中 IMG 的 CSS

Question

谁能告诉我为什么这个脚本不起作用。我从这个网站上的另一个答案得到它。并试图改变它以满足我的需要，但它不起作用。 我正在尝试将 CSS 从 #tsclogo 更改为 .tsclogo，然后如果您向上滚动则再次返回。 注意:我删除了图片 src 和 href 链接

<script>
window.onscroll = function() {
var nav = document.getElementById("loot").getElementsByTagName("img")
[0].src="Some IMAGE";
if ( window.pageYOffset > 100 ) {
    nav.classList.add("tsclogox");
} else {
    nav.classList.remove("tsclogox");
}
}
</script>

html

<div id="loot" class="heady-logo">   
<a href="some link" accesskey="1"><img id="tsclogo" src="some img" alt="IPS Community Suite"></a>
</div>

CSS

.tsclogox {
height: 40px !important;
position: fixed;
top: -6px;
}

#tsclogo {
max-width: 100%;
height: 59px;
-webkit-transition: height 1s;
-ms-transition: height 1s;
transition: height 1s;
position: relative;
z-index: 9000;

Answer 1

您的脚本需要稍作修改(如评论中所述)。但我认为对于您要实现的目标，您还需要更改 CSS 以将 !important 添加到您对 .tsclogox 的定位中。这是因为 #tsclogo 的 CSS 有一个 position: relative，而 #tsclogo 比 .tsclogox 更具体>。

这是一个 jsfiddle这表明了我的意思。