javascript - 我无法获得此脚本来滚动更改IMAGE的CSS

谁能告诉我为什么这个脚本不起作用。我从这个站点上的另一个答案中得到的。并尝试对其进行更改以满足我的需求，但此方法不起作用。
我正在尝试将CS​​S从#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;

}

最佳答案

您的脚本需要进行较小的更正（如注释中所述）。但是我认为对于要实现的目标，还需要更改CSS，以将!important添加到.tsclogox的位置中。这是因为#tsclogo的CSS具有position: relative，并且#tsclogo比.tsclogox更具体。

这是一个jsfiddle，它显示了我的意思。