私はこれを頼んで少し愚かだと思うが、どういうわけか私のナビゲーションバー(ul)の背景色は見えない(私のJQueryスクリプトが固定位置。css background-color要素の目に見えない
すべてのヘルプは高く評価される。
body{
\t width: 100%;
\t margin: 0 auto;
background-color: #000000;
}
#HeaderImage{
\t width: 100%;
\t height: auto;
\t display: block;
}
#Nav{
list-style-type: none;
margin: 0%;
padding: 0%;
width: 100%;
background-color: #4f4f4f;
display: block;
}
.Nav{
display: block;
color: #c5c5c5;
text-align: center;
display: inline;
width: 10%;
float: left;
padding: 1%;
}
.NavEx{
display: block;
color: #c5c5c5;
text-align: center;
display: inline;
width: 10%;
float: right;
padding: 1%;
}
.Nav:hover,.NavEx:hover{
background-color: #006500;
color: #00ff00;
}
.FixedNav {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#Content{
background-color: #2d5c1e;
margin-left: 10%;
margin-right: 10%;
padding-top: 2%;
height: 100vh;
}
.HomeContent{
text-align: center;
}
#HH{
text-align: center;
font-size: 24pt;
margin-top: 10%;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GIP</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//Some JQuery here to make the navigation bar stay on top when scrolled beneath it.
$(document).ready(function() {
$(window).scroll(function() {
console.log($(window).scrollTop())
if ($(window).scrollTop() > $('#HeaderImage').height()) {
$('#Nav').addClass('FixedNav');
}
if ($(window).scrollTop() < $('#HeaderImage').height()) {
$('#Nav').removeClass('FixedNav');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<img ID="HeaderImage" src="images\WebsiteHeader.jpg" alt="headerimage" />
<ul ID="Nav">
<a href="Default.aspx"><li class="Nav">Home</li></a>
<a href="About.aspx"><li class="Nav">About</li></a>
<a href="Gastenboek.aspx"><li class="Nav">Forum</li></a>
<a href="Contact.aspx"><li class="Nav">Contact</li></a>
<a href="Login.aspx"><li class="NavEx">Login</li></a>
<a href="Default.aspx"><li class="NavEx">Logout</li></a>
\t \t </ul>
<div id="Content">
<h2 id="HH">Hiya.</h2>
<p class="HomeContent">Nothing interesting here yet.</p>
</div>
</form>
</body>
</html>
ありがとう、これが私の問題を解決しました。あなたは何が間違っていたか把握するのにどれくらいの時間を費やしたのか信じられません。すぐにマークアップも修正しました。できればこれをアップボートしますか? – user6875529