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

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); 
});