在WordPress中滚动导航不起作用

Question

我想为我的网站创建一个“ scroll-nav”。 所以我分离了2个Navs并添加了一些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(){
});

Answer 2

 @import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500); nav { background: #333; overflow: auto; padding: 60px; position: relative; z-index: 2; } ul { text-align: center; float: right; } ul li { display: inline-block; } ul li a { text-decoration: none; display: block; padding: 5px 10px; margin: 0 10px; color: #eee; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 14px; line-height: 32px; font-weight: bold; transition: all 200ms linear; } nav a:hover, nav#small a:hover { color: #C18055; background: #fff; } nav#small { background: #fff; padding: 20px 40px; position: fixed; box-sizing: border-box; width: 100%; top: 0; z-index: 1; box-shadow: 0px 2px 2px #fff; } nav#small h1, nav#small a { color: #333; } nav#small h1 { font-size: 38px; } nav#small h1>a { color: #C18055; } nav#small h1>a:hover { color: #3ab4a6; } div#content { height: 2200px; background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0; opacity: 0.9; } div#content h2 { color: #fff; font-weight: bold; transform: rotate(-10deg); line-height: 60px; font-size: 48px; text-transform: uppercase; position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; width: 10%; bottom: 10%; text-shadow: 2px 2px 2px #333; font-family: 'Pacifico', cursive; } div#content h2:before { display: inline-block; background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0; background-size: cover; width: 239px; height: 200px; content: ""; transform: rotate(-80deg); margin-bottom: 40px; } @media (max-width: 700px) { nav { padding: 20px; } nav h1 { display: block; float: none; text-align: center; padding: 20px; } nav ul { float: none; padding: 20px; } div#content h2 { width: 30%; } nav#small { padding: 20px; } nav#small ul { padding: 5px; } nav#small h1 { padding: 10px; font-size: 28px; margin-bottom: 5px; } nav#small a { font-weight: normal; } } 

 <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <nav id="small"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="content"> <h2>Scroll!</h2> </div> 

您能检查一下我上面的代码段吗？