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" and all other pages id =＆＃34; masthead＆＃34;`，并且该样式适用于这些页面。当我尝试在任何页面上为标题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标题动画仅适用于主页而非其他页面，可能是由于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
}

使用Javascript和PHP

1 个答案: