Making sitetitle (in svg) and nav burger (in svg) changing colour depending on the row.

[zochovsky]

Hi @arminunruh and @Richard-K

I was wondering whether you could help me?

On my site (in the mobile viewport), I’m trying to set up a sitetitle (in svg format) and a menu nav (burger in svg) to change colour as your scroll between black and white backgrounds/rows. I’ve managed to almost make it work but the problem is that the logo and nav don’t change the colour immediately after entering into the relevant row. You need to scroll up or down a little bit in a opposite direction to make it switch colours. Could you advise how can I make it work in a smoother fashion?

Here is the link: http://foi.elmot.atthouse.pl/information

The logo and the nav should change the colour from black to white immediately after entering the black background and then reverse it when you scroll back to the white background.

This apparently is working flawlessly on Android devices at the moment, but not in Safari on iPhone 7 (iOS 14.2).

Many thanks in advance

[Richard]

Dear @zochovsky

What is the code you are using? :)

Best wishes and Seasons Greetings
Richard

[zochovsky]

Hey @Richard-K

Thanks for getting back to me on this.

Here is the code:

$('body').on('mousewheel touchmove', function(){
if($('.black').length){

        var windowOffset = $('.black').offset().top - $(window).scrollTop() - 19;
        
        if(windowOffset <= 0){
            $('.mobile-title svg path').css('fill', "#fff");
            $('.bread-crust-top').css('background', "#fff");
            $('.bread-crust-bottom').css('background', "#fff");
        } else {
            $('.mobile-title svg path').css('fill', "#000");
            $('.bread-crust-top').css('background', "#000");
            $('.bread-crust-bottom').css('background', "#000");
   }
}

});

Many thanks again and best wishes!

[Blickwinkel74]

@zochovsky how did you do that with the sub categories in the menu?