Question

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>

<body>
<div class="header">
<a class="logo" href="home.html"><img src="VL-Logo.png"></a>
</div>
<nav role="navigation">
<div class="Nav">
    <a href="home.html">Home</a></li> 
    <a href="portfolio.html">Portfolio</a></li>
    <a href="process.html">Process</a></li>
    <a href="#">Contact</a></li>

</div>
</nav>
<div class="jumbotron">
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>

</div>

<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>

</div>

</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
    <li>Adobe Suite</li>
    <li>Axure RP</li>
    <li>HTML/CSS/Javascript</li>

</ul>

</div>


</body>
</html>

@charset "UTF-8";

@font-face {
font-family: Verdana, Geneva, sans-serif;
}

body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
margin:auto;
/*border:2px solid red;*/
}

div.header {
float:right;
}


div.Nav a{
background-color: #FFF;
color: #000;
font-size: 11px;
font-weight: bold;
margin: 0px;
padding:32px;
text-transform:uppercase;
text-decoration:none;
/*border-radius: 4px 4px 4px 4px;*/
 }


div.Nav a:hover {
 background-color: orange;
 }

div.jumbotron{
position:relative;
top:30px;
background-color: #000;
color:white;
text-align:center;
padding:20px;
height:400px;
} 

div.info {
background-color: #FFF;
color:black;
padding:20px;
height:400px;
}
div.footer{
background-color:#000;
color:white;
height:400px;
clear:both;
padding:20px;
}

我想在网站上修改一个导航栏，这样当你向上和向下滚动时，它会停留在一个地方。我还计划在photoshop中显示图像和设计工作以及界面，并将它们放在Axure中。

我的网站已使用此代码进行更新，可在vasilioslambos.com上查看

Answer 1

最好在新的div中包装您想要静态的所有内容，例如

<body>
<div id="fixed">
<div class="header">
<a class="logo" href="home.html"><img src="VL-Logo.png"></a>
</div>
<nav role="navigation">
<div class="Nav">
    <a href="home.html">Home</a></li> 
    <a href="portfolio.html">Portfolio</a></li>
    <a href="process.html">Process</a></li>
    <a href="#">Contact</a></li>

</div>
</nav>
</div>

css

#fixed{position:fixed;
top:0;
width:100%;
z-index:9999;/*High z-index so nothing can hide it*/
background:rgb(255,255,255);
padding:5px 0;
}
*{margin:0;padding:0;}

并更改此

div.Nav a{
background-color: #FFF;
color: #000;
font-size: 11px;
font-weight: bold;
margin: 0px;
padding:5px 32px;/* dont need 32px on the top, left, bottom, right*/
text-transform:uppercase;
text-decoration:none;
/*border-radius: 4px 4px 4px 4px;*/
 }

这会影响jumbotron，所以你最好不要经常在所有部分使用position属性。如果我的HTML代码没有自动对齐，我只会将其用作覆盖。

psst从jumbotron中移除position属性并且它适合地方

定位导航栏以使其固定

1 个答案: