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

Brine: Nav to change color after scrolling past Hero

Question

Hi friends, 

I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. 

 

/*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;
   }

any help would be GREATLY APPRECIATED 

link to site

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
40 minutes ago, AThompson_social said:

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

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


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

@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;
}

 

Share this post


Link to post
  • 0

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 😉

Share this post


Link to post
  • 0

@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?

 

Edited by AThompson_social

Share this post


Link to post
  • 0
Posted (edited)

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

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...