WordPress多个导航栏

时间:2016-02-03 作者:Tom Withers

这更像是一个“是否可能”的问题,“我有一个主页,它有一个全宽的标题和一个透明的导航栏,当你滚动时,这个导航栏会变为白色。在我的所有其他页面上,我希望这个导航栏在你滚动时以白色开始并保持白色。

目前,我正在使用jQuery使导航栏变为白色,这当然很好。但有人知道我如何才能实现我所描述的吗?

欢迎您的回答/建议!

2 个回复
SO网友:Howdy_McGee

大多数WordPress主题都利用了一个名为body_class() 将特定类输出到body标记。实现如下所示:

<body <?php body_class(); ?>>
这将在您的网站主页上放置一个独特的类,而该类不会出现在任何其他页面上,因此您可以在jQuery中专门针对该类或使用某种jQuery功能,如hasClass().

SO网友:Tom Withers

因此,我已经使用php找到了一个解决方案,我将在下面进行解释:

所以我创建了一个var,并将其命名为white。它有一个我使用的空字符串和一个if语句,然后我使用了WordPress函数is_front_page

<?php 
    $white = "";
    if( !is_front_page() ) {
        $white = \'scrolled\';
    }
?>
然后在我的Navbar类中,我添加了以下内容:

<?php echo $white; ?>
最后,我的jQuery:

$(document).ready(function() {
    $(window).scroll(function(){
        $(\'.navbar\').toggleClass(\'scrolled\', $(window).scrollTop() >= 50);
    });
});
这种方法非常有效!