Question

我的客户端需要此网站上的标题http://www.solewood.com/ 我在这里找到了一些问题，但它们仅适用于标题的某个元素。这是我正在处理的网站http://treestyle.com/密码是vewghu 他们都是shopify网站。任何帮助将不胜感激。

Answer 1

如果您检查solewoood网站，就可以了解他们是如何实施标题的。

当页面位于顶部时，标题div有这个CSS：

<div class="header">

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

当您向下滚动时，.header_bar CSS类也会添加到div中：

<div class="header header_bar">

.header_bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

当用户从顶部向下滚动（徽标，文字颜色等）时，还有一些其他内容也会发生变化，但您明白了这一点。

如果您不确定如何检测用户是否位于页面顶部，请参阅here。

修改

在回复您的评论时，请尝试使用带有2个参数的jQuery .toggleClass()。

例如：

$(window).scroll(function(e){ $el = $('.header'); $el.toggleClass('header_bar', $(this).scrollTop() > 0); });

Answer 2

这很好地说明了这一点：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll

我使用这种技术在滚动时将背景颜色变为白色，然后在返回顶部时恢复为透明。

如果你想完全换掉标题。您可以复制标题，然后使用它来打开和关闭这些标题。

如何在滚动上更改整个标题

2 个答案: