想要用Javascript实现响应式图像

Question

!!我的导航栏现在

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();


        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 100) {
                mainNav.className += 'small';
            } else {
                mainNav.classList = 'header';
            }
        
        })

.header {
  background: blue;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  height: 80px;
}

.header .header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .header-content .menu-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 150px;
}

.header .header-content .menu-links .links-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.header .header-content .menu-links .links-list a {
  padding: .8rem;
  text-transform: uppercase;
  font-family: 'Oswald';
}

.header .header-content .menu-links .links-list a:hover {
  color: red;
}

.header .header-content .menu-links .social-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 20px;
}

.header .header-content .menu-links .social-links a {
  padding: .3rem;
}

.header .header-content .menu-links .social-links a:hover {
  color: red;
}

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

我想构建一个固定的导航栏，当向下滚动时会更改其大小，我尝试使用CSS将图像设置为与导航栏一样的高度和宽度，但我没有这样做。 然后我尝试使用javascript，但我不知道写得很好，也许您可​​以帮忙。

<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();