Question

您好我正试图在用户开始向下滚动页面时显示隐藏的导航。用户滚动时不会显示导航。我不确定为什么它不起作用。我很确定它与JavaScript或HTML有关。如果没有，我也可以发布CSS，但现在这就是我的...

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="language" content="english">

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/modernizr.js"></script>
<!-- jQuery -->
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Foundation -->
<link rel="stylesheet" href="css/foundation.css">
<!-- Alert box -->
<script type="text/javascript" src="js/alertbox.js"></script><!--http://www.w3schools.com/js/js_cookies.asp-->
<!-- News ticker -->
<link href="li-scroller.css" rel="stylesheet" type="text/css">
<script src="jquery.li-scroller.1.0.js"></script>
<!-- Site style -->
<link rel="stylesheet" href="css/SiteStyle.css" />
</head>
<!-- Cookie / Body container -->
<body onload="checkCookie()">  
<nav id="fixedbar">
    <ul id="fixednav">
      <li><a href="#">Men</a></li>
      <li><a href="#">Women</a></li>
      <li><a href="#">Kids</a></li>
    </ul>
  </nav>
  <div class="large-1 columns void">&nbsp;</div>
<div class="large-10 medium-12 small-12 columns siteContent">
<header>
<div class="large-12 medium-12 small-12 columns">
<div class="large-3 medium-3 small-12 columns">
<img src="img/logo.jpg" class="logo" alt="Main logo."/>
</div>
<div class="large-9 medium-9 small-12 columns userDash">
<div class="large-9 medium-8 small-12 columns userContainer">
<div id="userName">Sign In or Register
</div>
</div>
<div class="large-3 medium-4 small-12 columns cartContainer">
<img src="img/shoppingBag.svg" alt="Shopping bag icon" class="shoppingBagIcon"/><span> 0 </span><span class="shoppingBagText"> Items in your bag</span>
</div>
</div>
<div class="large-9 medium-9 small-12 columns tickerContainer">
<ul id="ticker01"><li><div>*** WELCOME TO NOVANI DESIGNS! **</div></li><li><div>* SIGN UP TODAY AND RECIEVE 25% OFF YOUR ENTIRE PURCHASE! **</div></li>
<li><div>* SPEND OVER $50 AND ENJOY FREE SHIPPING! ***</div></li></ul><script type="text/javaScript" src="js/newsscroll.js"></script>
</div>
<div class="large-12 medium-12 small-12 columns nav">
<div class="large-5 medium-5 small-12 columns">
<nav>
   <ul class="mainNav">
      <li><a href="#">Men</a></li>
      <li><a href="#">Women</a></li>
      <li><a href="#">Kids</a></li>
    </ul>
</nav>
</div>
<div class="large-5 medium-5 small-12 columns">
<input type="text" style="height:1.5em;"/>
</div>
</div>
</div>
</header>
<footer style="height:100em;">
1
</footer>
</div>
<div class="large-1 columns void">&nbsp;</div>
<!-- jQuery -->
  <script src="js/vendor/jquery.js"></script>
  <!-- Foundation -->
<script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
  <!-- News ticker -->
  <script>$(function(){$("ul#ticker01").liScroll();$("ul#ticker02").liScroll({travelocity: 0.15});});</script>
<script type="text/javascript">
$(document).ready(function(){
  $('#fixedbar a').on('click', function(e) {
    e.preventDefault();
  }); 
  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 215) {
      $('#fixedbar').fadeIn(250);
    }

    else if(scrolltop <= 210) {
      $('#fixedbar').fadeOut(250);
    }
  });
});
</script>
  </body>
</html>

Answer 1

删除以下行

<nav id="fixedbar">
    <ul id="fixednav">
      <li><a href="#">Men</a></li>
      <li><a href="#">Women</a></li>
      <li><a href="#">Kids</a></li>
    </ul>
  </nav>

固定导航 - 滚动到顶部

1 个答案: