javascript - 使用 Javascript 和 PHP 在单独的页面上以不同方式设置标题动画

Question

我有一个 header.php 文件，它被调用到我的所有页面中，其中有:

<header <?php if (is_page('Home')) { echo 'id="home-masthead" class="site-header" role="banner"'; } else { echo 'id="masthead" class="site-header" role="banner"'; } ?>>

这意味着，如果我在主页上，我可以在我的 CSS 中使用 #home-masthead 为该页面设置标题样式，并为我设置的所有其他页面设置样式可以仅使用 #masthead 设置页眉样式。

我的问题是，即使 php 可以提供我的主页标题 id="#home-masthead"和所有其他页面id="masthead"`，并且样式在这些页面上有效。当我尝试在除主页以外的任何页面上对标题 ID 进行动画处理时，它不起作用。

这是我的 CSS:

#masthead {
  height: 100px;
  transition: all 0.5s;
  /* other styles here */
}

.animate#masthead {
  height: 75px;
}

和我的 JS:

// Header Shrink

$(function() {
  var shrinkHeader = 125;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if ( scroll >= shrinkHeader ) {
      $('#home-masthead, #masthead, #logo, #list-container').addClass('animate'); // header-animate
    }
    else {
      $('#home-masthead, #masthead, #logo, #list-container').removeClass('animate'); // header-animate
    }
  });
  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});

tl;dr JS header 动画仅适用于主页而不适用于其他页面，可能是由于 php 代码更改了主页以外页面的 id。

Answer 1

试试这段代码。 console.log 应该出现在开发工具的控制台选项卡上

if ( scroll >= shrinkHeader ) {
  console.log("entered if");
  $('#home-masthead, #masthead, #logo, #list-container').addClass('animate'); // header-animate
}
else {
  console.log("entered else");
  $('#home-masthead, #masthead, #logo, #list-container').removeClass('animate'); // header-animate
}