WordPress首页导航滚动变色仅生效需求代码异常求助

Hey there! Let’s get this sorted out—your goal is to have that scroll-triggered nav color change only on the homepage, right? The issue likely comes down to either your PHP condition not properly restricting the JS to the homepage, or a mix-up with how WordPress handles is_front_page() vs is_home(). Here’s how to fix it step by step:

1. Correctly Restrict Your JS to the Homepage #

First, make sure your scroll event code only loads on the homepage. The mistake might be that your JS is loading site-wide instead of being wrapped in the right WordPress conditional check.

Important Note on WordPress Conditionals #

If your homepage is set to a static page (Settings > Reading), is_home() will target your blog posts page—not the front page. So using is_front_page() && is_home() would actually prevent the code from loading on your static homepage. Instead, use just is_front_page() to target whichever page you’ve set as your site’s front page.

Wrap your JS like this in your theme’s header.php or footer.php (footer is better for performance):

<?php if (is_front_page()) : ?>
<script>
  // Run on scroll
  window.addEventListener('scroll', function() {
    const animNav = document.getElementById('anim-nav');
    const navBtns = document.getElementById('nav-btns');
    const scrollPos = window.scrollY;

    if (scrollPos > 75) {
      animNav.classList.add('bg-fill');
      navBtns.classList.remove('white');
      navBtns.classList.add('black');
    } else {
      animNav.classList.remove('bg-fill');
      navBtns.classList.add('white');
      navBtns.classList.remove('black');
    }
  });

  // Set initial state on page load (in case user refreshes while scrolled)
  document.addEventListener('DOMContentLoaded', function() {
    const animNav = document.getElementById('anim-nav');
    const navBtns = document.getElementById('nav-btns');
    const scrollPos = window.scrollY;

    if (scrollPos > 75) {
      animNav.classList.add('bg-fill');
      navBtns.classList.remove('white');
      navBtns.classList.add('black');
    } else {
      navBtns.classList.add('white'); // Ensure homepage starts with white text
    }
  });
</script>
<?php endif; ?>

2. Lock Down Default Styles with Body Classes #

WordPress automatically adds a home class to the <body> tag of your front page. Use this to set default styles so non-homepages keep black nav text, and the homepage starts with white:

/* Default: Non-homepage nav is black */
#nav-btns {
  color: #000;
}

/* Homepage default: Nav text is white */
body.home #nav-btns.white {
  color: #fff;
}

/* Homepage scroll state: Nav text turns black */
body.home #nav-btns.black {
  color: #000;
}

/* Homepage scroll state: Nav gets background fill */
body.home #anim-nav.bg-fill {
  background-color: #ffffff; /* Adjust to your desired fill color */
}

3. Double-Check Your Nav Structure #

Make sure your wp_nav_menu() output is correctly generating the #anim-nav and #nav-btns elements. For example, your menu arguments might look like this to add the IDs:

wp_nav_menu(array(
  'theme_location' => 'primary',
  'container' => 'div',
  'container_id' => 'anim-nav',
  'menu_id' => 'nav-btns',
  // Other menu args...
));

That should do it! Now your scroll-triggered nav changes will only run on the homepage, while all other pages keep the default black nav text.

内容的提问来源于stack exchange，提问作者user3550879