通过添加 class 缩小带有徽标的粘性 header？

Question

我有一个header，当页面的scroll-position大于0时，添加一个class is-sticky。

此 header 包含带有我的徽标的 img。我想在添加 class 时缩小包括 img 之一的高度。

我该怎么做？这是我的 header 的标记和 css:

.top-bar {
  position: relative;
  width: 100%;
  z-index: 9999;
  background-color: #FFF;
  opacity: 1.0;
}

.is-sticky {
  top: 0;
  width: 100%;
  z-index: 99999;
  background-color: #fff;
  height: 72px;
}

这里是标记：

<div id="undefined-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 0px;">
    <div class="top-bar" style="position: fixed; top: 0px;">
        <div class="site-branding">
            <a href="http://localhost:8080/wordpress/" title="MyLogo">
                <img class="site-logo" src="http://localhost:8080/wordpress/logo.png">
            </a>
        </div>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="menu">
                <ul class=" nav-menu">
                    <li class="current_page_item">
                        <a href="http://localhost:8080/wordpress/">Home</a>
                    </li>
                    <li class="page_item page-item-2066">
                        <a href="http://localhost:8080/wordpress/blog/">Blog</a>
                    </li>
                    <li class="page_item page-item-2">
                        <a href="http://localhost:8080/wordpress/sample-page/">Homepage</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

Answer 1

css 就是

    .is-sticky{
      height: 10px;
     }

    .is-sticky .site-logo{
        height:8px;
    }

“.site-logo”现在只有在其具有 class“.is-sticky”

的任何级别的父项时才会获得 "height:8px"

编辑： 刚看到 OPs 得分。我是不是误解了这个问题？

通过添加 class 缩小带有徽标的粘性 header？

Shrink sticky header with logo by adding a class?

html

css

sticky

css-animations