Change Squarespace CSS on scroll

Question

I am trying to change the background color of the header element in my Squarespace site using custom CSS and code injection.

I found this previous, non-Squarespace solution.

I have attempted to adapt it, but given my lack of jQuery knowledge and how exactly Squarespace uses code injection, I am at a loss.

In the custom CSS area I have added

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

In the code injection area I have added

<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>

The homepage of our website can be accessed here.

Edit:

Expected result: After scrolling some distance x (currently 100px) navigation header will add a semi-transparant fill

Current result: no change

score 1 · Accepted Answer · answered May 31 '16 at 16:34

1

Your code will work, just get rid of colons after the background-color selectors. http://screencast.com/t/qfNoKpSwaRui

answered May 31 '16 at 16:34

Vcasso

1,328
1
8
14

This worked. Also updated the jQuery reference to the most recent version. – regularGuy May 31 '16 at 18:36

score 0 · Answer 2 · answered Jun 04 '16 at 17:26

I would probably handle this a slightly different way on Squarespace using the same idea, in order to clean up your code, release some unnecessary methods, and keep your code tight.

Use a CSS class modifier, then use jQuery to add/remove the class. This way you don't have have to use jQuery's CSS methods.

Add this custom CSS to 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);
    }
}

As you can see above, the default state will be transparent. When we scroll down, we want to add the CSS class modifier, .is-scrolled, which then add the new CSS. To add/remove the class we can just modify your 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>

score 0 · Answer 3 · edited Mar 30 '17 at 05:25

0

Change the background color of a specific page (rather than just the header) as the user scrolls, for example, change this:

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

to

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

edited Mar 30 '17 at 05:25

Eric Leschinski

146,994
96
417
335

answered Mar 29 '17 at 21:33

Eric Brodzinski

1

Change Squarespace CSS on scroll

3 Answers3