如何增大粘性菜单（Sticky Menu）中的Logo尺寸？

我运营着一个网站，需求为：当菜单切换至粘性状态（向下滚动时显示的白色菜单）时，增大菜单内Logo的显示尺寸。相关HTML代码如下：

<header class="banner navbar navbar-default navbar-static-top  headhesive--clone headhesive--stick" role="banner" data-transparent-header="true">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div id="logo">
        <a href="https://www.atvmototraveler.ro/">
          <img data-rjs="2" class="logo-trans logo-reg" src="https://www.atvmototraveler.ro/wp-content/uploads/2022/10/atv_de_inchiriat_inchirieri_atv_inchirieri_motociclete_cluj_cluj_napoca_atvmototraveler-61x61.png" alt="Atvmototraveler" width="61" height="61">
          <img data-rjs="2" class="logo-main logo-reg" src="https://www.atvmototraveler.ro/wp-content/uploads/2022/10/inchirieri_atv-inchiriat_inchirieri_atv_cluj_inchiriere_atv_de_inchiriat_rent_atv_cluj_logo-1-301x300.png" alt="Atvmototraveler" width="61" height="61">
        </a>
      </div>
    </div>
    <div class="themo_cart_icon">
      <a href="https://www.atvmototraveler.ro/cart/">
        <i class="th-icon th-i-cart3"></i>
      </a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" style="height: 0px;">
      <ul id="menu-atv-de-inchiriat-meniu" class="nav navbar-nav">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-312 current_page_item menu-item-447">
          <a href="https://www.atvmototraveler.ro/" aria-current="page">
            <i class="fa fa-home"></i> Închirieri ATV </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1245">
          <a href="https://www.atvmototraveler.ro/trasee/">
            <i class="fas fa-map-signs"></i> Trasee </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1207">
          <a href="https://www.atvmototraveler.ro/flota/">
            <i class="fas fa-truck-monster"></i> Flota </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645">
          <a href="https://www.atvmototraveler.ro/despre-noi/">
            <i class="far fa-building"></i>&nbsp;Despre Noi </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-724">
          <a href="https://www.atvmototraveler.ro/contact/">
            <i class="fas fa-envelope"></i> Contact </a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-557">
          <a href="https://www.atvmototraveler.ro/product/inchirieaza-atv-cluj/">
            <i class="fas fa-key"></i> Rezervă Acum </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

通过CSS即可实现需求：利用粘性菜单的专属类作为判断条件，调整对应状态下的Logo尺寸，同时添加过渡动画优化交互体验。

/* 给Logo添加过渡动画，让尺寸变化更平滑 */
#logo img {
  transition: width 0.3s ease, height 0.3s ease;
}

/* 粘性菜单状态下的Logo放大样式 */
.headhesive--stick #logo img {
  width: 80px !important; /* 可根据需求自定义尺寸 */
  height: 80px !important;
}

关键说明 #

• 粘性状态的菜单由headhesive--stick类标识，以此作为CSS选择器的匹配条件
• 使用!important是为了覆盖图片标签上的内联width/height属性
• 过渡动画transition属性可以让尺寸变化过程更自然，避免突兀的视觉跳转

内容的提问来源于stack exchange，提问作者Molnar Istvan