Change header fill on scroll using jQuery and custom CSS

I am trying to change the background color of the header element in my 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.

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

Current result: no change

I'm not a jQuery expert but I notice two things.

1. You're loading jQuery v. 1. The latest release is v. 2.1.4 (iOS fail-safe edition, not support IE<9), or v. 1.11.3 (support IE6-8). jQuery 1.11.3 and 2.1.4 Released – iOS Fail-Safe Edition.

2. I think the double colon in your css() method is incorrect. I think correct is

   'background-color' : 'rgba(0, 0, 0, 0.7)'

   w3schools Try-It Example.

Hope this helps.

-Steve

Thank you!! Works like a charm after adding both those changes.

My pleasure.

You might want to consider putting the JQuery in a code block in the footer (at the end of the page) rather than in Page Header Code Injection (at the beginning of the page). At the beginning, it gets executed even if the browser isn't finished loading the DOM. It may not make a difference in your case, if nothing is executed automatically but instead awaits a user action. Sometimes, though, it does.

Hey mate! I know it's a year later, but just to add on the person before me('s) answer.

If you would like your header to fade in between coming up and down from the scroll point, just insert these three lines of code after your "custom css":

#header {
  background-color:rgba(0,0,0,0.7);
  -webkit-transition:background-color .4s;
   -moz-transition:background-color .4s;
   transition:background-color .4s;
}

So what this does is uses a CSS3 feature (that will be ignored for nonsupporting browsers), that basically allows you to control how long it takes for certain values to change. For this particular example in javascript, the only thing that changes is a css quality, so transition works. Transition also works for say, when you determine (in css) if a button has been hovered, and a css property changes.

The -webkit- and -moz- prefixes are there because some browsers only support the features with the prefixes (but it's the same thing).

The syntax for transitions is "transition: WhatYouAreTransitioning HowLong;"

You can also put "all" as what you are transitioning, and use commas to separate different values, such as "transition: width 2s, color 1s ease, background-color .2s ease-in;"

The "ease" and "ease-in" and so forth are just different ways that the action can happen, and is most useful for things like shape changes and translations on axes. You can learn more about this here https://css-tricks.com/almanac/properties/t/transition/

This is great! I was hoping you guys have a solution for this:

Template: PursuitGoal: To keep the nav-bar sticky and apply box-shadow on-scroll event.Status: I've managed making nav-bar sticky and applying the shadow using the css codes below, but NOT th e "On scroll event" part. Help?

.Header-inner { z-index: 9998; width: 100%; } .Header{ z-index: 9999; position: fixed; width: 100%; }

//

.Header{
    height: 80px; -webkit-box-shadow: 0px 0.8px 5px  rgba(100, 100, 100,
0.49); 
   -moz-box-shadow: 0px 0.8px 5px  rgba(100, 100, 100, 0.49); 
   box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.49);  }

Thank you in advance!!!