javascript - Wordpress 中的滚动导航不起作用

Question

我想为我的网站创建一个“滚动导航”。所以我分开了 2 个 Nav 并添加了一些 jquery:

<nav class="main-nav clearfix">
    <?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>


<nav id="scroll-nav" style="display:none">
    <?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>


$(window).scroll(function() {

    if ($(window).scrollTop() > 50 ){

        $('#scroll-nav').css('display', 'block');

    } else {

        $('#scroll-nav').css('display', 'none');

    };      
});

但是它不起作用。我是否必须因为 WordPress 而做一些不同的事情？它在普通的 html 中进行了测试，它工作正常。

Answer 1

当您必须在 class 属性中执行此操作时，您会像 ID 一样放置clearfix。

<nav id="scroll-nav" class="clearfix" style="display:none">

然后把你的

$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){

    $('#scroll-nav').css('display', 'block');

} else {

    $('#scroll-nav').css('display', 'none');

}; 
});

进入

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