Brine: Nav to change color after scrolling past Hero

@tuanphan 

40 minutes ago, AThompson_social said:

@tuanphan 

You need to use JavaScript to create sticky nav & change color

Reference: https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

@tuanphan So I can't get it to trigger a color change. the Page is an index so do I need to put the script in the header of each individual page in the index or just in the header of the index? i've tried both and I can't get it to work. In addition, even when using the script, I can't get the nav to be sticky to the top of the window.  I have the nav sticky using the first set of css

script in the header 

<script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.color = "#6ed78f";
  } else {
    document.getElementById("header").style.color = "#173d56";
  }
}
</script>

css for making the nav stick to the top of the page 

/*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/
Header {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
}

   // fix mobile nav
   .Mobile-bar--top
    {
     position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: #173d56;
   }
   .Mobile-bar {
       position: fixed;
       z-index: 99999;
   }

   // move mobile overlay down
   .Mobile-overlay-menu-main {
       padding-top: 80px;
   }

css for the transition color change

header{
   transition: 0.2s;
  color: #173d56;
}

@ThompsonWebDesign @paul2009 @lu.diehl @colin.irwin @ANI.agency If any of you have any thoughts on this, I would greatly appreciate the help

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:

1. Add this to Settings > Advanced > header code injection:

(Change the scroll height you wish to change the color, here it is set to 400 px)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

2. Add this to Design > Custom CSS 

Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)

.Header{
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}

.Site-inner{padding-top: 50px;}

Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

@lu.diehl Thank you so much! this is very helpful. 

the password is socialive

Is there a way to change the color of the nav text instead of just the color of the background?

And to trigger the site tile to change to a different version?

For what it's worth, for templates based on Brine , the number of concerns when creating a fixed header are much greater than is typically appreciated, and include:

• differences between index and non-index pages
• differences between first-child index sections with image vs without.
• whether you have the headers set to overlap on index pages
• what headers (top/bottom) are enabled
• whether the screen is resized
• whether the announcement bar is used
• whether the announcement bar is used but then closed by user
• whether text in the announcement bar is wrapped when screen width changes
• whether the header covers up content when anchor links (same-page "jump" links) are used
• whether then navigation wraps or font size changes on width change (and therefore header height changes, and therefore necessary padding)
• whether you want the header fixed on mobile (and again, whether you also want the announcement bar fixed on mobile along with it)
• whether you have the mobile information bar (MIB) enabled for mobile devices.
• and more.

A lot of these issues have been around...for years.

If you have a very simple use case and manage to avoid all of the above (and more) concerns, basic CSS like position:fixed or position:sticky can indeed be used. For other cases, a CSS-only approach will cause some problems that you may not detect (but your users probably will). For those cases, I created Fixit - Fixed Headers for Squarespace - Brine.

It also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, etc. when scrolled.

Finally, note that using onScroll as proposed in the code samples above is not the most performant way to go about solving the issue. It better to also leverage requestAnimationFrame and/or setInterval when doing such things with onScroll.

-Brandon

@AThompson_social, to change the font color, follow the guidance from @lu.diehl but target 'Header-nav-item' rather than 'Header'.