Question

这是我的代码，希望你们帮助我。

我正在尝试创建一个贴在页面顶部的导航栏，并在用户向下滚动时移动。

＆＃13;

<!DOCTYPE html>
<html>

<title>New Technology Planet</title>

<head>

 
<style>


header {
    background-image : url("pic15.jpg");
    color:white;
    text-align:center;
    padding:150px;
}






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:40px;
	 margin-top: 15px;
	 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:20px;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

  

 
#section {
    width:350px;
    float:center;
    padding:10px;	 	 
}
#footer {
    background-image : url("pic17.jpg");
    color:white;
    clear:both;
    text-align:center;
    padding:100px;	 	 
}

#header{
    font-family: "Comic Sans MS", cursive, sans-serif;
  }

    

</style>

	

</head>


<body>

         <header>
            <h1>New Technology Planet</h1>
			<p><h3>The WebSite Is Still Under Construction By Laith SJ</h3></p>
			<p>Teamspeak3 & WebSites Hosting</p>
            <p>Our goal is to give you the best what we can do!</p>
         </header>




		 
		 
		 
         
              <!-- Navagator start -->

			  <nav role='navigation'>
                     <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 -->

<!-- -->

        
		 
		 
       <div id="section">
         <h2>test</h2>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         
       </div>

     
	 <!-- last part of the page -->
	 
	  <div id="footer">
        New Technology Planet
      </div>
	  
	  
</body>
</html>

＆＃13;

如果您认为有好的内容可以帮助观众，请随时编辑帖子，并希望您能编辑代码以便它可以正常运行。

如果您需要一个关于我要求告诉我的内容的示例，我不想发布其他网站，所以我不违反任何规则。

谢谢

Answer 1

创建一个班级sticky并为其指定position:fixed。滚动查看窗口＆amp; amp;导航栏位置然后将该类分配给导航器以将其粘贴在屏幕顶部。请参阅以下示例：

JSFiddle

＆＃13;

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 = '';
  }
}

＆＃13;

  header {
    background-image: url("pic15.jpg");
    color: #5A4A4A;
    text-align: center;
  }
  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: 40px;
    margin-top: 15px;
    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: 20px;
  }
  li a:hover:not(.active) {
    background-color: #111;
  }
  .active {
    background-color: #4CAF50;
  }
  #section {
    width: 350px;
    float: center;
    padding: 10px;
  }
  #footer {
    background-image: url("pic17.jpg");
    color: white;
    clear: both;
    text-align: center;
    padding: 100px;
  }
  #header {
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  .sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

＆＃13;

<header>
  <h1>New Technology Planet</h1>
  <p>
    <h3>The WebSite Is Still Under Construction By Laith SJ</h3>
  </p>
  <p>Teamspeak3 & WebSites Hosting</p>
  <p>Our goal is to give you the best what we can do!</p>
</header>


<!-- Navagator start -->

<nav role='navigation' id="topNav" class="">
  <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 -->

<!-- -->




<div id="section">
  <h2>test</h2>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>

</div>


<!-- last part of the page -->

<div id="footer">
  New Technology Planet
</div>

＆＃13;

如何制作粘性导航栏？

1 个答案: