向下滚动时如何使标题背景部分透明答案

【问题标题】：How make the header background partially transparent when scrolling down向下滚动时如何使标题背景部分透明
【发布时间】：2021-05-13 08:13:31
【问题描述】：

这是一种什么样的 html & CSS 样式？请帮忙

链接：https://buddhapowerstore.com/collections/main-page/products/feng-shui-black-obsidian-wealth-bracelet#looxReviews

【问题讨论】：

标签： html css shopify

【解决方案1】：

您可以使用此函数获取滚动事件并获取滚动位置，如下所示。

window.onscroll = function(e) { 
    posY = this.scrollY;
}

并定义一个要添加到标题的类，像这样

.partially_transparent {
     background-color: rgba(num, num, num, 0.5);
}

在滚动时，获取 posY 值，如果它大于 0 或特定值，则将该类添加到您的标题中。

if (posY > 0)
$('#header').addClass('partially_transparent');
else 
$('#header').removeClass('partially_transparent');

总结一下；

// insert this function theme.js.liquid
window.onscroll = function(e) { 
    posY = this.scrollY;
    if (posY > 0)
      $('#header').addClass('partially_transparent');
    else 
    $('#header').removeClass('partially_transparent');
}

// insert this class to theme.scss.liquid

.partially_transparent {
     background-color: rgba(num, num, num, 0.5);
}

【讨论】：