Header fixed & transparent only on home 1st gallery

Site URL: https://www.casegoods.in/

Hi everyone, 

password of the webitse : CaseGoods_C3
Template : Brine

I would like to make a header that has these properties :
- landing page, first full screen gallery page > fixed header with transparent background
- landing page, rest of the page bellow this gallery > same fixed header but change automatically into a coloured background so that the logo and menu stay visible on top of the content.
- any other page > same fixed header with a coloured background so that the logo & menu stay visible on top of the content.

I've tried as many things I could find with videos, blogs and forums tutoriels and custom codes but not able to achieve it so far. 
I see 3 ways of starting trying :

1. put logo & menu into "Header:Layout, top position" and give a colour to my header background, then I "just" have to make it fixed and to make it transparent on the landing first gallery. 
2. put logo & menu into "Header:Layout, bottom position" so it's already on transparent background, then I "just" have to make it fixed and to add a background colour everywhere else than on the gallery. 
3. Or maybe it's something totally different 🙂

https://www.joshuakissi.com/

On this website, on the landing page, the header goes from white text to black text when you scroll down, so there must be a way for my header to go from transparent background to coloured background on that same page right? 

Also right now I'm using custom code for to make the menu fixed, it's working but it seems to create a bug : my first gallery on the landing page is set on 100hv to always take 100% of the screen space but because of this code, it doesn't. Not sure why. I'm using a faded background colour for now but eventually will change it for another colour, no worries about that.

/* Fixed Menu */
.Header {
 position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
  background-color: rgba(0,255,0,0.3)!important; 
}

@media screen and (min-width: 1080px) {
.Main--page, .Intro, .Main {
    padding-top: 120px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}

Hoping someone will be able to find me thanks !

@Paul_in You could add the JS and CSS below. What it does is dynamically add a data-dynamic-bg attribute to the .Header element whose value is based on the id you add to the IDS variable. Update the IDS variable in the JS code by adding the id's of the sections you want the background color to change: 

JS:

(function (document) {
    
  /**************************************************************************
   * This code will add a "data-dynamic-bg" attribute to the .Header element
   * if it's over a section defined in the array of IDS.
   ***************************************************************************/
  
   // Array of HTML element ID's. 
  var IDS = [
    '#landing-01',
    '#landing-06',
  ];

  /**************************************************************************
   * DO NOT EDIT CODE BELOW, unless you know what your doing.
   ***************************************************************************/

  // Initialized code depending on if the user places it in the header or footer
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    
    var header, section, headerHeight, rect, setBackground, removeBackground, timeout;

    addClosestPolyfill();
    
    if(isMobile()) {
      header = document.querySelector('.Mobile-bar');
    } else {
      header = document.querySelector('.Header');
    }

    addDynamicBg();

    delegate(document, 'click', '.Header a', function(){
      setTimeout(function(){
        setBackground = false;
        removeBackground = true;
        header.setAttribute('data-dynamic-bg', '');
        addDynamicBg();
      }, 500);
    });

    window.addEventListener('resize', debounce(function(){
      if(isMobile()) {
        header = document.querySelector('.Mobile-bar');
      } else {
        header = document.querySelector('.Header');
      }
      addDynamicBg();
      setBackground = false;
      removeBackground = false;
    }, 250));
    
    window.addEventListener('scroll',function(){
      // If there's a timer, cancel it
      if (timeout) {
        window.cancelAnimationFrame(timeout);
      }

      // Setup the new requestAnimationFrame()
      timeout = window.requestAnimationFrame(addDynamicBg);
    });

    function addDynamicBg(){
      IDS.forEach(function(id){
        section = document.querySelector(id);
        // Exit if not section found
        if(!section) return;
        
        rect = section.getBoundingClientRect();
        headerHeight = header.offsetHeight;
        
        if(!setBackground && rect.top <= headerHeight && Math.abs(rect.top) < rect.height) {
          setBackground = true;
          removeBackground = false;
          header.setAttribute('data-dynamic-bg', id);
        }

        if(!removeBackground && rect.top <= headerHeight && Math.abs(rect.top) > rect.height) {
          setBackground = false;
          removeBackground = true;
          header.setAttribute('data-dynamic-bg', '');
        }
      });
    }
  }

  function isMobile() {
    return window.matchMedia('(max-width: 1080px)').matches;
  }

  function debounce(func) {
    var wait = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1];
  
    var timeout = void 0;
    return function () {
      var _this = this;
  
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
  
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        func.apply(_this, args);
      }, wait);
    };
  }

  function delegate(target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill() {
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector ||
        Element.prototype.webkitMatchesSelector;
    }

    if (!Element.prototype.closest) {
      Element.prototype.closest = function (s) {
        var el = this;

        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

})(document);

CSS:

/* Smoothly transition the background colors */
[data-dynamic-bg]{
  transition: all .2s;
}

/* Target the section with the id of #home-01 */
[data-dynamic-bg="#home-01"] {
  background-color: blue !important;
}

/* Target the section with the id of #landing-06 */
[data-dynamic-bg="#landing-06"] {
  background-color: green !important;
}

Here's an example of how it works:

Thanks a ton! It looks exactly like what I need and it goes beyond it by also thinking about the second gallery / banner lower in the page and it's easy to customise the colour in the CSS after that. And you even thought about the Phone version which I was ok to give up on.

That's really awesome. 

A couple of question because it's going a little bit beyond my knowledge, I know how to mess with the CSS but not javascript 🙂 
Ok I actually managed on my own to include all this and make it work so answering my own questions for the people who might read this.

1. Where am I supposed to copy past the JS code you wrote? in the code injection part? 
   I put the JS script in Injection code "header", it didn't work initially because I had not started and ended with <script></script>
2. I had some small custom CSS code shown in my first message to make the menu fixed, do I need to remove it? will it conflict with your code? Or am I supposed to keep it because it's making the menu fixed as I want it to be ?
   I kept this bit of CSS code to keep my menu fixed 
3. Do I need to put the logo & menu in "Header:Layout, bottom position" or "Header:Layout, top position" for your code to work as planned? 
   I put the logo and menu in "Header : Layout  top position"

Ok so everything works perfectly but one tiny thing :
In the phone version I don't get why, the menu is with a background colour :
that colour is the colour of the SITE : BORDER color if this option is active 
that colour is the colour of the FOOTER : Background color 

When I scroll on my phone, that background colour scrolls with my page and then everything is perfect.

I found this online which I think explains how to fix that issue on a banner, but mine is not a banner, it's a gallery

https://www.rebeccagracedesigns.com/blog/mobile-navigation-on-header-image

Any thoughts ?

@jpeter

Sorry to push but any chance this script you made could also include making the dropdown folder background transparent on "landing-01" area (I renamed home-01 to be more consistent) and "landing-06" area and coloured background anywhere else? 

13 minutes ago, Paul_in said:

Ok so everything works perfectly but one tiny thing :
In the phone version I don't get why, the menu is with a background colour :
that colour is the colour of the SITE : BORDER color if this option is active 
that colour is the colour of the FOOTER : Background color 

When I scroll on my phone, that background colour scrolls with my page and then everything is perfect.

I found this online which I think explains how to fix that issue on a banner, but mine is not a banner, it's a gallery

https://www.rebeccagracedesigns.com/blog/mobile-navigation-on-header-image

Any thoughts ?

 

Yeah looks like there's some JS running on the page that adds margin to the <body> element, see video below. You can probably override it with some CSS:

body.tweak-site-width-option-full-width {
	margin-top: 0 !important;
}

5 minutes ago, Paul_in said:

@jpeter

Sorry to push but any chance this script you made could also include making the dropdown folder background transparent on "landing-01" area (I renamed home-01 to be more consistent) and "landing-06" area and coloured background anywhere else? 

 

You can update that by adding CSS by targeting the child element that has the class of .Header-nav-folder:

/* Change dropdown */
[data-dynamic-bg="#landing-01"] .Header-nav-folder,
[data-dynamic-bg="#landing-06"] .Header-nav-folder {
	background: rgba(0,0,0,0) !important;
}

It's working perfectly, thank you so much

@jpeter I just noticed this whole Javascript has created another issue.

If I'm on the landing page at a position where the header has the coloured background "on" and I use the menu to go to another page, this new page works as planned with a fixed menu on top with a coloured background that goes over the content (cf image 1). all good

But if I'm on the landing page at a position where the header has a transparent background and I go into another page, then this page doesn't work as planned, it "inherits" the transparent background setup. (cf image 2) and I have to refresh this page to get it right again. 

19 hours ago, Paul_in said:

@jpeter I just noticed this whole Javascript has created another issue.

If I'm on the landing page at a position where the header has the coloured background "on" and I use the menu to go to another page, this new page works as planned with a fixed menu on top with a coloured background that goes over the content (cf image 1). all good

But if I'm on the landing page at a position where the header has a transparent background and I go into another page, then this page doesn't work as planned, it "inherits" the transparent background setup. (cf image 2) and I have to refresh this page to get it right again. 

@Paul_in Looks like the particular Squarespace template you use has Ajax loading enabled. I updated the code that should fix this issue. 

@jpeterThanks again for following up, I tried a first time and wasn't able to fix the bug. I was about to suggest a different way of doing by using this script on all the other pages of the website to "force" loading a header background of my choice everywhere. More of a tweak than a clean solution.

But I copied the updated code again to make sure I had not made any mistake in the process and it seems to be working perfectly now. 
I'm very grateful you took the time to make that customisation, it's really makes a huge difference graphically to me! 

Best

Paul
 

Hello,

I stumbled upon this thread trying to figure out the exact same thing. I'm not sure what ID to look for to target the header and what to enter in :

  var IDS = [
    '#landing-01',
    '#landing-06',

I'm not using a template, I'm on 7.1, will that still work?

Thanks in advance!