在滚动时更改 Squarespace CSS答案

【问题标题】：Change Squarespace CSS on scroll在滚动时更改 Squarespace CSS
【发布时间】：2016-09-28 21:01:08
【问题描述】：

我正在尝试使用自定义 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）后，导航标题将添加一个半透明填充

当前结果：没有变化

【问题讨论】：

标签： javascript jquery css squarespace

【解决方案1】：

你的代码可以工作，只是去掉背景颜色选择器后面的冒号。 http://screencast.com/t/qfNoKpSwaRui

【讨论】：

这行得通。还更新了对最新版本的 jQuery 引用。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

到

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

【讨论】：