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

Answer 2

使用jQuery Waypointsheader插件在特定滚动位置/偏移处触发类更改。这里甚至有专门为此目的的航点扩展（粘性元素）。您可以使用 CSS3 过渡/动画或 jQuery UI 类更改动画对其进行动画处理。

从我最近创建的一个站点中，该站点具有一个粘性标题，其动画也类似于您链接的站点，这是我用于该功能的所有 JS：

$('.header-wrap').waypoint('sticky', {
    stuckClass: 'stuck',
    offset: -1
});

offset: -1.header-wrap意味着一旦元素的顶部-1px相对于窗口命中就会触发更改（因此基本上一旦窗口完全滚动 - 如果您放置-200它不会触发，直到窗口滚动 200 像素）。

类stuck更改处理所有透明度、动画、位置等。

Answer 3

javascript 和 CSS3 的组合应该可以解决问题。本质上，您需要做的是收听 $(window).scroll 事件并在某个 y 偏移处，向您的标题添加一个类（例如填充）：

.header { transition: all 1s; }
.header.fill { background-color:rgba(0,0,0,.25); }