Change the background color of Navigation bar on scroll

[RowrRigo]

Hello Support team!
I’m migrating a website to PRO, due to awful experiences using the current theme.
But i want to replicate the navigation change of color on scroll. (it was originally implemented of the website but had to change it because was buggy)

So, im currently developing at https://chasingclouds.info/chasing/solscapes/

What i want to make is that the website loads with the transparent backround and after scrolling it will fade into solid #fffddf

Thanks for your time

The website that im migrating is www.solscapes.ca if it matters for some reason.

Best Regards

[jumar]

Hello @RowrRigo,

Thanks for writing in!

To achieve this, please add this CSS code to X > Launch > Options > CSS:

.x-bar-fixed {
  background-color: #fffddf !important;
}

Hope it helps.

[RowrRigo]

@jumar

.x-bar-fixed {
background-color: #fffddf !important;
}

That was easier than expected
Sorry for that…
Is there a way to archive a transition from transparent into color depending on how much pixels are scrolled?

[jumar]

Hello there,

Yes, you can do this by adding the Javascript code below to X > Launch > Options > JS:

jQuery( document ).ready(function($) {

$('.x-bar-fixed').css("background-color", "#fffddf"); 

$( window ).scroll(function() {
if ($( this ).scrollTop() > YOUR_PIXELS_HERE) { 
    $('.x-bar-fixed').css("background-color", "YOUR_BACKGROUND_COLOR").css("transition","0.3s ease-in-out "); } 
else if ($( this ).scrollTop() > YOUR_PIXELS_HERE) { 
    $('.x-bar-fixed').css("background-color", "YOUR_BACKGROUND_COLOR").css("transition","0.3s ease-in-out "); } 
else if ($( this ).scrollTop() > YOUR_PIXELS_HERE) {
    $('.x-bar-fixed').css("background-color", "YOUR_BACKGROUND_COLOR").css("transition","0.3s ease-in-out "); } 
else if ($( this ).scrollTop() > YOUR_PIXELS_HERE) {
    $('.x-bar-fixed').css("background-color", "YOUR_BACKGROUND_COLOR").css("transition","0.3s ease-in-out "); } 
else {
    $('.x-bar-fixed').css("background-color", "#fffddf").css("transition","0.3s ease-in-out "); } });
});

Then change YOUR_BACKGROUND_COLOR and YOUR_PIXELS_HERE to the values needed.
Please take note that pixels should be numeric values only. E.g. 400

You can add more pixel if you want by duplicating a line of else if.

else if ($( this ).scrollTop() > YOUR_PIXELS_HERE) {
    $('.x-bar-fixed').css("background-color", "YOUR_BACKGROUND_COLOR").css("transition","0.3s ease-in-out "); } 

And of course, just retain the CSS code provided a while ago:

.x-bar-fixed {
   background-color: #fffddf !important;
}

Hope it helps.