0
こんにちは私は、ユーザーがページを下にスクロールし始めると、表示する隠しナビゲーションを取得しようとしています。ユーザーがスクロールすると、ナビゲーションは表示されません。なぜそれがうまくいかないのか正確にはわかりません。私はそれが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"> </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"> </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>
を削除します：'上fixed'を＃fixedbar'。 – Himmel
ありがとうございました。私がディスプレイを取り出したとき：なし。それはCSSで示され、固定されています。しかし、私が信じているJavaScriptは、ユーザーがスクロールダウンすると表示されるはずです。 –