On Scroll Site Title Image Change

[alicja_b]

Hello there,

on my transparent Nav bar, I have a white site title image as a png-file that I would like to turn black for certain rows, as it disappears into the background color when there's no picture underneath.
(For reference, here's my website: alicjaboss.com)

So my question is – how do I change the png-file for the site title image for certain rows?

I've found this topic (http://laythemeforum.com/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background) that doesn't quite cover my question, unfortunately.

The code that I attempted to modify for my needs doesn't do what I want it to do, and the only thing it did was change the background color of the rows and not the png-file :')

Here's the code I pasted into the "head" section:

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".whiterow");
        $nav = jQuery(".navbar");
        $nav.removeClass("dark");
        $sitetitle = jQuery(".sitetitle span");
    });
    
    jQuery(document).on("scroll", function(){

        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                $sitetitle.img(img.attr('src') != "https://alicjaboss.com/wp-content/uploads/2022/05/Zeichenfläche-4-Kopie-21.png") {);
                return false;
            }else{
                $nav.removeClass("white");
                $sitetitle.img(img.attr('src') != "https://alicjaboss.com/wp-content/uploads/2022/06/logo_dark.png");
            }
        });
    });
</script>

and here the code I pasted into the "CSS for Desktops"

.whiterow {
    background: black;
}

.dark {
    background: red;
}

now, there seems to be something wrong with the class section, I think? I assigned the rows in this project the class ".whiterow" but I don't know where to go from here.

[arminunruh]

hey!

dont use:

Frontend.GlobalEvents.on("newpageshown"

instead use:

window.laytheme.on("newpageshown"

also this code is wrong in many different ways :D :

$sitetitle.img(img.attr('src') != "https://alicjaboss.com/wp-content/uploads/2022/05/Zeichenfläche-4-Kopie-21.png") {);

it should be:

jQuery(".sitetitle img").attr("src", "https://alicjaboss.com/wp-content/uploads/2022/05/Zeichenfläche-4-Kopie-21.png");

[alicja_b]

This post is deleted!

[alicja_b]

Hi Armin,

thanks a lot for your reply!
It worked on the one project I linked but not on any other page/project on the website unfortunately.

Here's the updated code:

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".whiterow");
        $nav = jQuery(".navbar");
        $sitetitle = jQuery(".sitetitle span");
    });
    
    jQuery(document).on("scroll", function(){

        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                jQuery(".sitetitle img").attr("src", "https://alicjaboss.com/wp-content/uploads/2022/06/logo_hell.png");
                return false;
            }else{
                $nav.removeClass("white");
                jQuery(".sitetitle img").attr("src", "https://alicjaboss.com/wp-content/uploads/2022/06/logo_dark.png");
            }
        });
    });
</script>

From what I understand the CSS section is redundant, correct?
How do I change the code so that the logo changes its color on each project?

[alicja_b]

Sorry if I'm a bother – another thing I noticed is that the class that I assign to rows doesn't appliy to the gutter, so that for a second there, the logo changes color in between two rows.

Is there a way around that?

[arminunruh]

maybe try:

$blackRows.each(function(){
            var rect = this.getBoundingClientRect();
var style = this.currentStyle || window.getComputedStyle(this);
var marginBottom = parseInt(style.marginBottom, 0)
            if(rect.top - offset < 0 && rect.bottom + marginBottom - offset > 0){
                $nav.addClass("white");
                jQuery(".sitetitle img").attr("src", "https://alicjaboss.com/wp-content/uploads/2022/06/logo_hell.png");
                return false;
            }else{
                $nav.removeClass("white");
                jQuery(".sitetitle img").attr("src", "https://alicjaboss.com/wp-content/uploads/2022/06/logo_dark.png");
            }
        });