Ability to hide or recolor a navigation bAr after a certain amount of scroll way

[thomasmaier]

This is possible via a script snippet, but this could easily be a setting in the Customizer, right? Set a navigation bar's opacity and background-color for X pixels of scroll height (e.g. 800px, which is a common page fold height).

Example: Have a full-page first image in your page with the navigation items sitting there with an invisible navigation bar and then let the navigation bar appear when you scroll down below the first image.

Bonus: Add this feature to the Site Title and e.g. let it get two different size values, so they can change due to scrolling. Or have the option to add a different logo for having scrolled, so you can have a higher or a flatter version of the logo.

[arminunruh]

mmh

did u get it to work using javascript?
if so can u post it here?

yea i think its a great idea, but im not sure many people would use it
i try to not add too many options if not many ppl will use it cause it will just add to the complexity

[thomasmaier]

@arminunruh

Hi Armin, I can only talk for myself but I basically need/use this feature in 75% of all the website I make (and I make a lot). It's just so common that you want to have a special first viewport/row or e.g. use the intro feature where a solid navigation bar doesn't look as great - but at the same time you absolutely need it later for scrolling down so the logo wouldn't constantly overlap text. And I hear this all the time, that this should be a feature for Lay Theme from others that use it frequently (like the 'burger menu on desktop' thing ;-) ).

Here is my code:

<script>
function changeCss () {
  var bodyElement = document.querySelector("body");
  var logoElement = document.querySelector(".sitetitle");
  this.scrollY > 350 ? logoElement.style.opacity = 1 : logoElement.style.opacity = 0;
}
function changeCss2 () {
  var bodyElement = document.querySelector(".home");
  var logoElement = document.querySelector(".navbar");
  this.scrollY > 350 ? logoElement.style.opacity = 1 : logoElement.style.opacity = 0;
}

window.addEventListener("scroll", changeCss , false);
window.addEventListener("scroll", changeCss2 , false);
    
</script>

It's really simple - it just adds or removes opacity based on scroll way. I have also another one that adds or removes a css class, which gives you a more convenient way to change the style – but I have some issues with it so I can't use it all the time and my JS knowledge is limited.

[arminunruh]

mmh yea man u're right

i should code this!

[thomasmaier]

@arminunruh Awesome! Could be great to have settings like transparency, height, color and animation for the navbar.