查看特定页面时，将额外的CSS类应用于标题

Question

如果用户向下滚动页面，可以从CSS专家那里获得帮助以降低标题的高度。 因此，仅保留标题而不是小图像和相关标题，而留出更多空间来查看网页。 这是通过在用户向下滚动页面时自动将“ scrolled”类添加到标题中来完成的。

<header class="push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;"

变成： class="push scrolled" ，当用户向上滚动页面时，它将返回class="push" ，将小图像再次添加到页眉中。

我的问题是针对特定页面，我需要标头类永久位于class="push scrolled" 。 我怎样才能做到这一点？

/* change on scroll */
header,
header * {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

header.scrolled {
    padding: 0px 0px 10px 0px;
}

header.scrolled #page-header-top .inner-wrap {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

header.scrolled a#logo {
    margin: 12px 0 5px;
}

header.scrolled ul#nav li a img {
    height: 0;
    margin: 0;
}

header.scrolled #mobile-btn {
    margin: 10px 0 3px;
}

Answer 1

听起来您的类正在用JS清空，这就是为什么它不保留该类的原因。 只要确保在重新添加类时还包括滚动类即可。

Answer 2

您可以使用其他类“ collapsable”，并且仅在具有此类$（“。collapsable”）。addClass（“ scrolled”）的标头中应用更改，不要将此类添加到不会更改的标头中。

您也可以使用id插入这个新类。