Question

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

我发现了之前的非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）导航标题后会添加半透明填充

当前结果：无变化

Answer 1

您的代码将起作用，只需在背景颜色选择器后删除冒号。 http://screencast.com/t/qfNoKpSwaRui

Answer 2

我可能会在Squarespace上使用相同的想法处理这种方式，以便清理代码，发布一些不必要的方法，并保持代码紧密。

使用CSS类修饰符，然后使用jQuery添加/删除该类。这样您就不必使用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类修饰符.is-scrolled，然后添加新的CSS。要添加/删除类，我们只需修改您的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); 
}

滚动

3 个答案: