javascript - 在滚动时更改 Squarespace CSS

Question

我正在尝试使用自定义 CSS 和代码注入(inject)更改我的 Squarespace 网站中 header 元素的背景颜色。

我发现这个以前的非 Squarespace solution .

我曾尝试对其进行改编，但鉴于我缺乏 jQuery 知识以及 Squarespace 如何使用代码注入(inject)，我不知所措。

在我添加的自定义CSS区域

.transparent-header #header { background-color: rgba(0,0,0,0.7); }

在我添加的代码注入(inject)区

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(window).on('scroll',function(){

    if ($(window).scrollTop() >= 100) {
        $('.transparent-header #header').css({
            'background-color:' : 'rgba(0,0,0,0.7)'
        });
    } else {
        $('.transparent-header #header').css({
            'background-color:' : 'rgba(0,0,0,0.0)'
        });
    }
});
</script>

本站首页可以访问here .

编辑:

预期结果:滚动一定距离x(当前为100px)后，导航头部会添加半透明填充

当前结果:没有变化

Answer 1

您的代码可以运行，只需去掉背景颜色选择器后的冒号即可。 http://screencast.com/t/qfNoKpSwaRui