Search code examples
javascriptjquerycsssquarespace

Change Squarespace CSS on scroll

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

Solution

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