Want to achieve responsive image with Javascript

I want to build a fixed navbar that is changing his size when I scroll down, I tried with CSS to set the image to be as height and width as the navbar but I didn't t make it. Then i tried using javascript and i don`t know to write very good,maybe you can help me.

<header class="header ">
    <div class="container">
      <div class="header-content">
        <div class="logo-img"><img src="/Core/img/logo1.jpg" class="logo" alt="logo"></div>
        <div class="menu-links">
          <ul class="links-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Contacts</a></li>
          </ul>
          <ul class="social-links">
            <li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-youtube fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

JAVASCRIPT


const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');


function changeLogo() {
    if (mainNav.style.height = '80px') {
        img.style.height = '80px';
    } else if (mainNav.style.height = '100px') {
        img.style.height = '100px';
    }
}
changeLogo();