Прокрутка Nav в 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

Вы ставите clearfix как ID когда вы должны сделать это в класса атрибута.

<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>

бы пожалуйста, проверьте мой вышеприведенный фрагмент?