Javascript 如何使标题栏固定
我想固定标题栏（包含我的个人资料、更改密码的栏），因此我创建了一个类 ![当我点击更改密码时，不需要完全更改密码][1] p、 位置固定 { 位置：固定； 顶部：30px； 右：5px； } 但是效果不好，我想说的是外观和感觉都不好 这是我的index.html代码Javascript 如何使标题栏固定,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想固定标题栏（包含我的个人资料、更改密码的栏），因此我创建了一个类 ![当我点击更改密码时，不需要完全更改密码][1] p、 位置固定 { 位置：固定； 顶部：30px； 右：5px； } 但是效果不好，我想说的是外观和感觉都不好 这是我的index.html代码 <!DOCTYPE html> <!-- The new doctype --> <html> <head> <meta http-equiv="Con
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="#article1">My Profile</a></li>
<li><a href="#article2">Change password</a></li>
<li><a href="#article3">Navigation Menu</a></li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div align="center" style="padding-top: 30px">
<table align="center" >
<tr >
</tr>
</table>
</div>
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/"><img src="medical.jpg" width="620" height="340" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
<a href="#" class="up">Go UP</a>
<a href="www.df.com" class="by">dh</a>
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
当我点击我的个人资料时，它会进入我的个人资料页面，但是标题栏消失了，同样，更改密码的标题栏也消失了，我不明白你为什么要指向
p标签位置：固定至导航ul
nav ul{
background:white;
border-radius:6px;
position:fixed;
top:30px;
right:5px;
}
作为导航标签中的栏，因此您需要为导航标签编写css来修复它，而您必须为导航标签编写css代码。
把这个放到css文件中
.pp
{
position:fixed;
top: 30px;
width: 944px;
z-index:1;
top:5px;
}
在正文中，将标题设置为类pp
<header class="pp"> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup style="float:left">
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="#articles">My Profile</a></li>
<li><a href="#line1">Change password</a></li>
<li><a href="#article3">Navigation Menu</a></li>
</ul>
</nav>
</header>
你的标志
还有一个别致的口号
将line1 id设置为articale2上方的此类
<div class="line" id="line1"></div>
@Sudhanshu抱歉，我错了，我正在删除它。您想修复的是什么部分？@asifrc在我的个人资料中，更改密码。该条的位置已更改，颜色也已更改。所以外观和感觉都不太好
<div class="line" id="line1"></div>