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?

closed as off-topic by Max Yudin, kraftner, cjbj, Robert hue, EAMann Jul 20 '17 at 3:50

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

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.

  • 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.

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