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

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_barCSS 类也会添加到 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;
}

当用户从顶部向下滚动时，还有一些其他的东西也会发生变化（徽标、文本颜色等），但你明白了。

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

编辑：

作为对您的评论的回应，请尝试使用带有 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

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

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