滚动时更改 Squarespace CSS

Question

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

我之前找到了这个，non-Squarespace solution。

我曾尝试对其进行改编，但鉴于我缺乏 jQuery 知识以及 Squarespace 如何使用代码注入，我一头雾水。

在我添加的自定义CSS区

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

在我添加的代码注入区

<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）后，导航 header 将添加一个 semi-transparant 填充

当前结果：无变化

Answer 1

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

Answer 2

我可能会使用相同的想法在 Squarespace 上以稍微不同的方式处理这个问题，以便清理您的代码，释放一些不必要的方法并保持代码紧凑。

使用 CSS class 修饰符，然后使用 jQuery 到 add/remove class。这样您就不必使用 jQuery 的 CSS 方法。

将此自定义 CSS 添加到 Squarespace：

#header {
    background-color: rgba(0,0,0,0.0);
    transition: background-color 200ms ease;
    &.is-scrolled {
        background-color: rgba(0,0,0,0.7);
    }
}

正如您在上面看到的，默认状态是透明的。当我们向下滚动时，我们想要添加 CSS class 修饰符 .is-scrolled，然后添加新的 CSS。要 add/remove class 我们只需修改您的 JavaScript.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on("scroll",function(){
        var header = $("#header");

        if ($(window).scrollTop() >= 100) {
            header.addClass("is-scrolled");
        } else {
            header.removeClass("is-scrolled");
        }
    });
</script>

Answer 3

在用户滚动时更改特定页面（而不仅仅是页眉）的背景颜色，例如，更改此：

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

至

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

滚动时更改 Squarespace CSS

Change Squarespace CSS on scroll

javascript

jquery

css

squarespace