Having issues with transparent menu background on scroll

Support
#1

I have a transparent menu when you scroll, it changes color and so does the sub-menu. That part is fine.
The issue I’m having is when you scroll back up the menu changes back to transparent but the sub-menu stay the same color and the on scroll. What is should do is change back to transparent as well.

Here is the js code

jQuery(document).ready(function($){
 $('.home .x-navbar-fixed-top, .home .x-navbar, .sub-menu').css("background-color", "transparent");
var image_height = $(".home #x-section-1").outerHeight();
 $(window).scroll(function(){
   if ($(this).scrollTop() > image_height) {
     $('.home .x-navbar-fixed-top, .sub-menu').css({"background-color": "#232323 "});
   } else {
     $('.home .x-navbar-fixed-top, .submenu').css({"background-color": "transparent"});
   }
 });
});
#2

Hi @mayhemds,

Thanks for writing in but unfortunately, we can’t provide support for custom code. But based on your provided code, it could be related to image_height since it’s only the condition that decides when it switches the color.

I’m not sure what image is that or what its position since it also need to calculate it from scroll top (current scroll position + image height). You may wish to consult it to a developer to have a closer look.

Thanks!

#3

Hi @Rad

I am a dev, I can’t work out why the sub-menu isn’t changing back to transparent when you scroll back up, the Menu changes. All I can put it down to is a bug with the menu.

I have attached 3 screenshots showing the issue.

Screenshot 1 - Transparent menu and sub-menu background = √

Screenshot 2 - Menu Background and Sub-menu on Scroll = √

Screenshot 3 - Menu back to transparent and sub-menu stays black. = X

#4

Hi There,

Thanks for the screenshot.
I can see you have used two type of submenu class in your code. Not sure if this is intentional or a typo.

That might be the cause of an issue.

Thanks

#5

@basanta

it wasn’t the two sub-menu classes I had one in the top line of code I removed that fixed it.

$('.home .x-navbar-fixed-top, .home .x-navbar, .sub-menu').css("background-color", "transparent");

you can now close this post