如果用户向下滚动页面,可以从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;
}

#1楼 票数:0

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

#2楼 票数:0

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

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

  ask by John translate from so

未解决问题?本站智能推荐:

5回复

将CSS应用于禁用的输入按钮

此代码工作正常,只有在单击复选框时才启用该按钮。 但是我想使用css类'class =“edit red btn”',虽然功能仍在工作,但按钮显示为可见。 我想添加一个css类,如果按钮被启用,另一个如果它被禁用...我怎么能这样做? 谢谢
4回复

将css应用于一组网址中存在的元素

我相信以下内容如果没有javascript / jquery是不可能的,但仍想确认一下,因为我不太擅长css / html / jquery。 我想将某种样式应用于元素,但仅当在我的网站中访问特定的URL时才可以。 我正在使用asp.net,因此单个aspx页面模板可以满足大量url,因
4回复

将Background-color属性应用于div不能按预期工作

我这里有什么问题? 该页面实际上分为5个div,代表左,中和右页面列的中间3个div包裹在一个具有id内容的div中。 如果您要查看源代码,我已链接到该页面。 当我尝试时,它不会很好地作为摘要显示在此消息中。 这是#content的样式 如何使#content的整个背景显示为白色?
3回复

如何在一组链接中的特定链接中添加CSS类?

我有5个链接,我想向特定链接添加active类。 例如 如果我想将active类添加到第二个链接(安全性)。 我该如何添加。 我尝试了上面的代码。 但是问题是。 页面重新加载时。 该活动没有出现。
5回复

如何使用jQuery在用户单击时在特定li上添加活动类

我有一个包含某些项目的菜单,我希望当用户clicks任何li ,只有它的类变为active 。 我有一个菜单项,如下所示: 我已经用 jQuery 尝试了以下代码: 它不适用于下拉菜单,而与所有其他没有下拉项目的菜单完美配合。 如何更改它也适用于具有项目下拉列表的菜单项的代码? 我也在我的页面上使用
2回复

如何使用javascript更改元素css类运行时

我已经解决了一些禁用更新面板按钮的新功能。 在这里,我成功禁用了按钮控件,并使用此javascript更改了innertext ob按钮: 在这里,我只想为所有更新面板创建一个通用功能,当用户单击此按钮时,该面板具有提交行为,然后它检测回发并禁用其他所有具有提交行为的控件,在这里,我也想更
2回复

在CSS类不起作用的每个元素上运行javascript

我正在尝试在具有特定CSS类的asp.net页面上的每个元素上运行javascript。 我不是很精通javascript,所以不知道为什么它不起作用。 我正在动态创建控件并将CSS类添加到它们,以及该类已附加到页面上的静态控件。 我只希望控件在页面加载后淡入。 这是我的脚本:
2回复

如何在jQueryAjax成功事件上应用不同的CSS样式?

我有一个asp.net应用程序。 我正在使用jquery ajax调用从服务器端检索数据并显示它。 这是我的代码, 上面的代码突出显示了被单击的html td元素,但是当我单击另一个td元素时,它应该忘记最后单击的元素并突出显示一个新元素。 当前,它不会忘记最后单击的元素。 我怎