Question

我试图隐藏Wordpress 仅限前页上的导航栏，并且只有在用户滚动一定数量的像素之后才会重新显示导航栏。所有其他页面都应该有一个正常的，始终可见的导航栏。

我在header.php中有这段代码：

 <head>
 <script>

 (function ($) {
 $(document).ready(function(){

    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
          $('.navbar-bg').css("background-color", "#3d3938");
        } else {
          $('.navbar-bg').css("background-color", "transparent");
        }
    });
  });
 }(jQuery));

 </script>
 </head>

就其本身而言，上述代码的工作原理完全与隐藏导航栏一样，但由于导航栏位于header.php中，因此会将其隐藏在所有页面上。

所以我添加一个if条件来检查我们是否在首页：

<head>
<script>  

if ( window.location.pathname == '/' ){

// Front-page
alert('Hello');

 $(document).ready(function(){

    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
          $('.navbar-bg').css("background-color", "#3d3938");
        } else {
          $('.navbar-bg').css("background-color", "transparent");
        }
    });
  });

} else {

// Other pages
    console.log(window.location.pathname);
}

 </script>
 </head>

条件有效，因为alert（）仅显示在首页上，但隐藏/滚动效果不再有效。我猜测我没有正确地将代码插入到if条件中，我尝试了一百万种组合，但没有任何效果。请帮忙。

Answer 1

您没有将JQuery引用为$。

执行以下操作：

<head>
<script>  
(function ($) {
    if ( window.location.pathname == '/' ){

        // Front-page
        alert('Hello');

        $(document).ready(function(){

            $(window).scroll(function () {
                if ($(this).scrollTop() > 400) {
                    $('.navbar-bg').css("background-color", "#3d3938");
                } else {
                    $('.navbar-bg').css("background-color", "transparent");
                }
            });
        });

    } else {

        // Other pages
        console.log(window.location.pathname);
    }
}(jQuery));
</script>
</head>

使用Wordpress中的jQuery隐藏导航栏

1 个答案: