Question

我有以下代码来影响我主页上的导航元素。

    if ( is_front_page() && is_home() ) {
// Default homepage
  $(window).on('scroll', function () {
  if ($(window).scrollTop() > 75) {
    $('#anim-nav').addClass('bg-fill');
    $('#nav-btns').removeClass('white').addClass('black');
  } else {
    $('#anim-nav').removeClass('bg-fill');
    $('#nav-btns').removeClass('black').addClass('white');
 }
});

}

我的导航看起来像

<nav id="anim-nav" class="row">

        <div id="nav-btns" class="col-sm-8">
               <?php wp_nav_menu( array( 'container_class' => 'screen-nav', 'theme_location' => 'primary' ) ); ?>

 ...

CSS

.bg-fill { background: #fff; }
.white { color: #fff;}
.black { color: #333;}

我想基本上让我的链接在页面顶部变白，然后在用户滚动时变黑。但仅限于主页。在其他地方我希望它们保持不变（原本是黑色的）

我尝试的所有内容似乎都适用于所有页面。

Answer 1

你的第一堆代码似乎混合了php和js。所以在你的条件之后，你应该添加一个结束的php标签，并在你的js代码之后添加一个开始标签。

if ( is_front_page() && is_home() ) { ?>
// Default homepage
  $(window).on('scroll', function () {
  if ($(window).scrollTop() > 75) {
    $('#anim-nav').addClass('bg-fill');
    $('#nav-btns').removeClass('white').addClass('black');
  } else {
    $('#anim-nav').removeClass('bg-fill');
    $('#nav-btns').removeClass('black').addClass('white');
 }
});
<?php
}

删除/添加不在index.php上应用的代码

1 个答案: