Question

我创建了导航栏（有一些帮助）当用户向下滚动导航栏时会随页面移动（固定位置），但是当我向第二部分添加照片时以及当我向下滚动图像时越过导航栏，我仍然不知道为什么！我读到你需要添加这样的东西（z-index -100），但是我不知道放在哪里或者如果它能起作用，希望你们帮助我。

＆＃13;

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');
},

＆＃13;

.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;
	font-size:20px;
	top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 60px;
	width:450px;
	
	}
	
 
img{
    position: absolute;
    right: 90px;
    top: 90px;
    width: 42%;
    height: auto;
	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;
	
    }
  


#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;
 }

＆＃13;

<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>					  
            <img src="ts3.png">
         </div>
         <div>					  
            <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 -->

＆＃13;

Answer 1

您可以将导航z-index设置如下：

nav {
z-index: 999;
}

编辑：

使用以下内容修复内容的移动：

img.p2{
   padding-top: 50px;
   left: 700px;
   right: 25px;
   width: 42%;
   height: auto;
   position: static;
}
section.L{
   float: left;
}

当用户向下滚动时，Pic会越过导航栏

1 个答案: