向下滚动时更改标题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");
    }
});