Question

当页面的滚动位置大于0时，我有一个标题并添加一个类is-sticky。

此标头包含带有我的徽标的img。我想在添加该类时缩小包含img之一的高度。

我该怎么做？这是我的标题标记和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”现在只有"height:8px"才能获得任何等级为“.is-sticky”的父级

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

通过添加课程来收缩带有徽标的粘性标题？

1 个答案: