0
我創建的導航欄（有一些幫助）當用戶向下滾動導航欄時將隨頁面（固定位置）一起移動，但是當我向第二部分，當我向下滾動圖像越過導航欄時，我仍然不知道爲什麼！我讀到你需要添加類似這樣的東西（z-index -100），但我不知道放哪裏，或者如果這樣會起作用，希望你們幫助我。當用戶向下滾動時，Pic會在導航欄上移動
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
var topNav = document.getElementById("topNav"),
stop = topNav.offsetTop,
docBody = document.documentElement || document.body.parentNode || document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;
window.onscroll = function(e) {
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
if (scrollTop >= stop) {
topNav.className = 'sticky';
} else {
topNav.className = '';
}
}
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* fisrt section */
header {
font-family: "Comic Sans MS", cursive, sans-serif;
}
header {
background-image: url("pic19.jpg");
color: white;
text-align: left;
width:auto;
height:450px;
padding-top: 50px;
}
.L{
width:700px;
height:auto;
}
p.head{
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size:50px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 45px;
}
p.L1{
font-family: Impact, Charcoal, sans-serif;
color: white;
\t font-size:20px;
\t top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 60px;
\t width:450px;
\t
\t }
\t
img{
position: absolute;
right: 90px;
top: 90px;
width: 42%;
height: auto;
\t box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
/* seconed section */
.S2{
position:static;
background-image: url("pic16.jpg");
width: auto;
height:450px;
float: center;
padding: 10px;
color:white;
}
h1{
padding-bottom:0px;
padding-top:50px;
padding-left:70px;
font-size:30px;
}
p.par{
padding-bottom:0px;
padding-top:3px;
padding-left:100px;
width:550px;
font-size:20px;
}
img.p2{
top:660px;
left:700px;
right:25px;
width: 42%;
height: auto;
\t
}
#H2{
background-image: url("pic16.jpg");
color: white;
text-align: left;
height:450px;
padding-top: 50px;
width:auto;
}
#footer {
background-image: url("pic17.jpg");
color: white;
clear: both;
text-align: center;
padding: 100px;
}
/* navabar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li.logo {
border-right: none;
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size: 50px;
margin-top: 5px;
padding-left: 30px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 25px 30px;
text-decoration: none;
font-size: 15px;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}<title>New Technology Planet</title>
<head>
<link rel="stylesheet" href="home.css">
</head>
<body>
<!-- Header of the page -->
<header>
<section class="L">
<p class="head">
New Technology Planet
</p>
<p class="L1">
We Hosts TeamSpeak 3 servers & websites <br><br>
"Our Goal Is Presenting To You The Best Services That We Can Do And The Best Prices That You Will Find"<br><br>
Teamspeak 3 is your new way to communicate with your friends and your employee
</p>
</section>
<div id="slideshow">
<div>
<img src="ts.png">
</div>
<div> \t \t \t \t \t
<img src="ts3.png">
</div>
<div> \t \t \t \t \t
<img src="ts4.png">
</div>
</div>
</header>
<!-- Header of the page >
<!-- navagattor start code -->
<nav role='navigation' id="topNav">
<ul>
<li class="logo">NewTecPlanet</li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News|Updates</a></li>
<li><a href="#contact">Products</a></li>
<li><a href="#login">SignUp | Login</a></li>
<li><a href="#about">About US</a></li>
<li><a href="#about">Contact Us</a></li>
</ul>
</ul>
</nav>
<!-- navagattor end code -->
<!-- second section or part1 start -->
<div class="S2">
<section class="L">
<h1>What is TeamSpeak 3 ?</h1>
<p class="par">TeamSpeak is proprietary voice-over-Internet Protocol (VoIP) software that allows computer users to speak on a chat channel with fellow computer users, much like a telephone conference call. A TeamSpeak user will often wear a headset with a microphone. Users use the TeamSpeak client software to connect to a TeamSpeak server of their choice, from there they can join chat channels.</p>
<p class="par">The target audience for TeamSpeak is gamers, who can use the software to communicate with other players on the same team of a multiplayer game. Communicating by voice gives a competitive advantage by allowing players to keep their hands on the controls.</p>
</section>
<img class="p2" src="pic20.png">
</div>
<!-- second section or part1 end -->
<!-- theird section -->
<!-- the end of the third section >
< !-- final part -->
<div id="footer">
New Technology Planet
</div>
<!-- final part end -->
@MaihanNijat謝謝編輯，但是當我測試你的編輯時，導航欄根本不工作，所以我不得不保留我一段時間，即使如此非常感謝你=） –