More than one onscroll elements by id

Question

This code works, but i also want to change Class of one more Div, how can i do it? I know it doesnt work with getElementById(). Im new at JS so dont judge if this is something very simple.

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

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("header").className = "fixed";
    } else {
        document.getElementById("header").className = "";
    }
}
</script>

i want to add class to "logo" too

<div id="header">
    <a href="index.html">
        <img id="logo">
    </a>
<ul>
    <li><a href="index.html">Etusivu</a></li>
    <li><a href="#">Kauppa</a></li>
</ul>
</div>

Answer 1

Well, Catfish, there's nothing stopping you from duplicating the line that already works and changing the id . I don't really understand what you mean by saying you know it doesn't work with getElementById() .

Also, if you're not using myFunction() anywhere else, it makes for cleaner code to use an anonymous function, like so:

window.onscroll = function() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("header").className = "fixed";
        document.getElementById("logo").className = "fixed";
    } else {
        document.getElementById("header").className = "";
        document.getElementById("logo").className = "";
    }
};