Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change header fill on scroll using jQuery and custom CSS


chill314

Question

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

Edited by chill314
Initial Revision
Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 0

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.

Edited by alxfyv
Initial Revision

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 0

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/

Link to comment
  • 0

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...