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 Waypoints 插件在特定滚动位置/偏移处的header上触发类更改。甚至还有一个专门用于此目的的Waypoints扩展（粘性元素）here。您可以使用CSS3过渡/动画或jQuery UI类更改动画为其设置动画。

我最近制作的一个网站上有一个粘贴的标题，它的动画类似于你链接的网站，这就是我用于该功能的所有JS：

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

offset: -1表示一旦.header-wrap元素的顶部相对于窗口点击-1px，就会触发更改（所以基本上一旦窗口滚动到所有位置 - 如果您放置{ {1}}在窗口滚动200px之前它不会触发。

类-200更改处理所有透明度，动画，位置等。

Answer 3

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

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

向下滚动时更改标题CSS

3 个答案: