0

I am migrating a static site over to WP. Currently I have a header function that changes the inverted logo to full color on user scroll using JS. See Function on scroll

Current JS for Scroll function:

$(window).scroll(function() {
    var top = $(window).scrollTop();

    //Clears navbar timing functions on initial scroll
    clearTimeout(timeout);

    //Conditional to make function run if header is scroll pased 100px
    if ((top > 100) && $('#mainNav').is(':hidden')) {
        showNav();
        timeout = setTimeout(hideNav, 2000);
    } else if ((top > 100) && $('#mainNav').is(':visible')) {
        showNav();
        $('#logo').attr('src', './assets/sg-logo-inverted.svg');
        $('.nav-trigger-line').css({'background-color':'#fff'});
    } else {
        $('header').css({
            'background-color': 'transparent'
        });
        $('#logo').attr('src', './assets/sg-logo-inverted.svg');
        $('#logo').css({'width': '175px'});
        $('.nav-trigger-line').css({'background-color':'#fff'});
    }
});

Current HTML Markup:

<header class="fixed-top p-3">
    <!-- Logo and Burger -->
    <div class="container-fluid brand-wrap">
        <div class="row">
            <div class="col-6">
                <a href="index.html"><img id="logo" src="./assets/sg-logo-inverted.svg" class="img-fluid" alt="Synchrony Group"></a>
            </div>
            <div class="col-6 trigger-wrapper py-1">
                <div id="burger">
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                </div>
            </div>
        </div>
    </div>
</header>

I have revised the mark in my header.php file to dynamically include the site logo via the WP Dashboard:

Revised HTML Markup:

<header class="fixed-top p-3">
    <!-- Logo and Burger -->
    <div class="container-fluid brand-wrap">
        <div class="row">
            <?php if ( get_header_image() ) : ?>
                <div class="col-6">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <img id="logo" src="<?php header_image(); ?>" class="img-fluid" alt="Synchrony Group">
                    </a>
                </div>
            <?php endif; ?>
            <div class="col-6 trigger-wrapper py-1">
                <div id="burger">
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                </div>
            </div>
        </div>
    </div>
</header>

The Scroll Function still works but fails to replace the image because it looks for the image in the specific dir of the page, which does not exist.

Question: How can I dynamically change the logo on scroll function? Is this something that is handled by PHP rather than JS. What is the correct method to go about doing this?

0

I'm assuming the file you're trying to display is located in your theme folder.

You can use get_template_directory_uri to get the path of your currently activated theme's root folder.

If you're looking to support child themes get_stylesheet_directory_uri() will look in the currently activated child theme's folder if a child theme is in use.

If you must have your JavaScript in a seperate file, you should look into how to pass PHP variables to your JavaScript file with wp_localize_script(). This is pretty straight forward.

I usually pass a variable called themeUrl containing the URL of the theme folder and baseUrl containing the base URL of my site to my JavaScript.

| improve this answer | |
  • I utilized get_stylesheet_directory_uri() and created an imgs folder in my theme dir. – WeebleWobb Jul 11 '17 at 12:59
0

Without rewriting, you could just reference the absolute url.

So ...src', './wp-content/themes/YOUR_THEME_HERE/assets/sg-logo-inverted.svg'

Or, a nicer way would be to use wp_localize_script() to reference the theme folder, and then you can access this via JavaScript.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.