javascript - 向下滚动时更改标题 CSS

Question

我正在尝试实现与该网站相同的标题淡入/淡出效果: http://www.shopstyle.com/

如果您转到该网站并向下滚动，您会看到初始标题是透明的，但当您向下滚动一定数量的像素时，CSS 会切换到纯色背景。这是通过 jquery/js 完成的还是可能通过 CSS3 完成的？

谢谢

Answer 1

单独通过 CSS 是不可能的，因为 CSS 无法选择滚动顶部。不过，通过 javascript 很容易做到这一点。

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});