滚动中的javascript函数中的webkit掩码

Question

我正在尝试在loadingisCompleted

中执行此操作

 $(window).scroll(function(){
    if ($('body').hasClass('home')) {
        if ($(window).scrollTop() > 0) {
        $('#tol-header').css('-webkit-mask-image','-webkit-gradient(linear, center top, center bottom, color-stop(1.00, rgba(0, 0, 0, 0)), color-stop(0.00, rgba(19, 40, 39, 1)))');

        } else {
            $('#tol-header').css('background','transparent');
        };
    };
});

目的：

1. 默认背景：透明
2. 滚动执行：-webkit-mask-image .....
3. 不影响标题中的元素。

我的文件包含

#tol-header { background: transparent; }

最终的结果是，无论我是否滚动，我在标题中的所有元素（菜单，徽标等）上都有永久的“透明”不透明度，与我想要的内容没有任何共同之处。

如果我改变scrollTop的位置 - background：transparent; else - -webkit-mask ....它很完美，因为我的背景（对其他元素没有任何影响;正如我想的那样），但是......即使我不滚动而且我在顶部也能正常工作页面。

如果有人可以提供帮助，我将感激不尽。

Answer 1

由于您的问题缺少一些关键细节，我正在尝试您想要做的事情。

我相信你也希望在其他地方使用$('#tol-header').css('-webkit-mask-image', 'none')，以便再次删除webkit掩码。