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

＆＃13;

@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;
  }
}

＆＃13;

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

＆＃13;

请检查我上面的代码段吗？

Wordpress中的滚动导航无法正常工作

2 个答案: