仅针对主页在文档加载时向下滑动导航答案

【问题标题】：Have navigation slide down on document load just for the homepage仅针对主页在文档加载时向下滑动导航
【发布时间】：2013-05-14 12:32:55
【问题描述】：

我是 javascript/jquery 的新手，我希望在登陆主页时有一个菜单动画，并让菜单显示而不是其他页面的动画。

下面的代码是我一直在玩的。

$(document).ready(function(){
if (document.location.href.indexOf('localhost:8888') > -1 ) {
   //slide down menu
}
else {
   //static menu
}
});

【问题讨论】：

你不能在文档准备好时让它淡入，并制作一个单独的函数让它在达到一定高度时保持静止吗？
这不是设计应用程序的好方法。我猜你有某种母版页，你正在尝试这样做。而是在主页中编写一个单独的函数来执行此操作。如果您需要更多帮助，请分享您的应用软件设计的一些细节。
我正在使用 Wordpress，并且在 header.php 文件中包含 nav html5 元素，该元素正在用于所有页面。如果它是导航的主页，有没有办法添加一个类？我也是 php/wordpress 的新手。顺便说一句，这样做为什么不好？
不确定在某个高度使其静止是什么意思。我希望菜单不为主页以外的任何页面设置动画@DiederikEEn

标签： javascript jquery css

【解决方案1】：

您可以使用 CSS3 动画来完成此操作

jsfiddle demo

将首页的<body>设置为有类homepage

<body class="homepage">
    <nav>
        Nav (w/UL+LI nav items)
    </nav>

    <!--...-->
</body>

然后要么创建自己的动画，要么使用像Animate.css这样的预建集

.homepage nav {
    -webkit-animation:fadeInDown .5s;
    -moz-animation:fadeInDown .5s;
    animation:fadeInDown .5s;
}

编辑：

在wordpress的主页上添加一个类：

结合来自Add a custom class name to Wordpress body tag? 和is_home() wordpress 函数的答案

将此添加到functions.php（免责声明：我尚未对此进行测试，但它应该可以帮助您完成 99% 的工作）

function my_plugin_body_class($classes) {
    //if (is_home()) {
    if (is_front_page()) {
        $classes[] = 'homepage';
        //return $classes;
    }
    return $classes;
}

add_filter('body_class', 'my_plugin_body_class');

【讨论】：

我的 header.php 包含 body 元素，因此如果将类主页添加到其中，动画仍将发生在其他页面模板上，因为它们会拉入 header.php 文件。
您只能将“主页”类添加到您的主页：$(document).ready(function(){ if (document.location.href.indexOf('localhost:8888') > -1 ) { $(body).addClass('homepage'); } });
@mdmullinax 感谢您的回复。这种工作但身体类吐出一系列其他类干扰我已经在css中拥有的东西。是否可以在正文中有主页？到目前为止，我在正文中有这个 > 连同您提供的代码。
我确实将 is_home 更改为 is_front 页面，因为我将 front-page.php 模板设置为静态首页
@alexP 动画仍然出现在所有页面上。