2017-05-03 21 views
0

我有一个矩阵背景的东西,功能齐全,但我只想让我的标题随着滚动移动,每当我将.content部分更改为不同的位置时,它会完全取消矩阵(矩阵不是实际上后台它更像是一切落后的区域。是否可以在CSS中使一个固定的身体不滚动?

<style type="text/css"> 
 
body{ 
 
    margin:0px; 
 
    background:#000; 
 
} 
 
.header-cont { 
 
    width:100%; 
 
    position:fixed; 
 
    top:0px; 
 
} 
 
.header { 
 
    height:50px; 
 
    background:#000; 
 
    border:1px solid #0F0; 
 
    width:960px; 
 
    margin:0px auto; 
 
} 
 
.content { 
 
\t overflow: hidden; 
 
    width:960px; 
 
    background: #000; 
 
    border: 1px solid #0F0; 
 
    height: 4000px; 
 
    margin: 70px auto; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Tech Time</title> 
 
<link href="../CSS/something.css" rel="stylesheet" type="text/css"> 
 
<link href="../CSS/canvas.css" rel="stylesheet" type="text/css"> 
 
<link href=".noscroll.css" rel="stylesheet" type="text/css"> 
 
<head> 
 
<style type="text/css"> 
 
body{ 
 
    margin:0px; 
 
    background:#000; 
 
} 
 
.header-cont { 
 
    width:100%; 
 
    position:fixed; 
 
    top:0px; 
 
} 
 
.header { 
 
    height:50px; 
 
    background:#000; 
 
    border:1px solid #0F0; 
 
    width:960px; 
 
    margin:0px auto; 
 
} 
 
.content { 
 
\t overflow: hidden; 
 
    width:960px; 
 
    background: #000; 
 
    border: 1px solid #0F0; 
 
    height: 4000px; 
 
    margin: 70px auto; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
    
 
<div class="header-cont"> 
 
    <div class="header"></div> 
 
    
 
\t <div class="content"> 
 
\t <table width="960" border="1"> 
 
\t  <tbody> 
 
\t  <tr> 
 
\t   <td width="338" height="180"><img src="file:///home/146971/Desktop/bigstock-128312288-1024x794.jpg" width="338" height="180" alt=""/></td> 
 
\t   <td width="311" align="left" valign="top" style="color: #00FF00"><p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold;">Juicero - Silicon Valleys Failure</p> 
 
\t   <p>By: <span style="font-style: italic">Alex Diaz</span>/<span style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">April 24</span></p> 
 
      <p>&nbsp;</p> 
 
      <p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">Juice — yes, the beverage — has experienced a renaissance of late: Juice bars. Juice cleanses. Juices for enlightenment, juices for energy, juices that might just cure cancer...</p> 
 
      <p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 10px;">&nbsp;</p> 
 
      <p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 10px;">&nbsp; </p></td> 
 
\t   <td width="289" rowspan="3">&nbsp;</td> 
 
      </tr> 
 
\t  <tr> 
 
\t   <td height="180"><img src="file:///home/146971/Desktop/watch.jpg" width="338" height="180" alt=""/></td> 
 
\t   <td align="left" valign="top" style="color: #00FF00; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold;"><p>Fitbit's upcoming smartwatch has reportedly been a giant mess!</p> 
 
\t   <p style="font-weight: normal">By: <span style="font-style: italic">Michael Esch</span>/May 2</p> 
 
\t   <p style="font-weight: normal">&nbsp;</p> 
 
\t   <p style="font-weight: normal">Yahoo Finance has nabbed a couple of photos. Reported to show Fitbit&rsquo;s upcoming smartwatch, along with a handful of reports that make the whole undertaking sound like one big fiasco...</p> 
 
      <p>&nbsp;</p></td> 
 
      </tr> 
 
\t  <tr> 
 
\t   <td height="180"><img src="file:///home/146971/Desktop/jive.jpg" width="338" height="180" alt=""/></td> 
 
\t   <td align="left" valign="top" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold; color: #00FF00;"><p>Collaboration software company Jive to be aquired by Aurea for 462 million</p> 
 
      <p style="font-weight: normal; font-style: normal;">By: <span style="font-style: italic">Ivan Diaz</span>/May 2</p> 
 
      <p style="font-weight: normal; font-style: normal;">&nbsp;</p> 
 
      <p style="font-weight: normal; font-style: normal;"> Jive, a community collaboration software company that was one of the biggest Enterprise 2.0-era success stories, going public in 2011, announced today it had agreed to be acquired by ESW...</p></td> 
 
      </tr> 
 
\t  <tr> 
 
\t   <td height="180">&nbsp;</td> 
 
\t   <td align="left" valign="top" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold; color: #00FF00;">&nbsp;</td> 
 
\t   <td>&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t <p>&nbsp;</p> 
 
    </div> 
 
    </div> 
 
     
 
<br><br><br> 
 
<body> 
 
<ul class="menu1"> 
 
    
 
    <li></li> 
 
    <li><a href="HOME.html"> Home </a></li> 
 
    <li><a href="#">News</a> 
 
    \t 
 
     <ul> 
 
     \t <li><a href="Tech.html" class="documents">Tech</a></li> 
 
      <li><a href="Political.html" class="documents">World</a></li> 
 
      <li><a href="Science.html" class="documents">Science</a></li> 
 
     </ul> 
 
    </li>  \t 
 
    <li><a href="#">Store</a> 
 
    
 
     <ul> 
 
      <li><a href="scom.html" class="documents">Computer</a></li> 
 
      <li><a href="sgad.html" class="messages">Gadget</a></li> 
 
      <li><a href="sran.html" class="signout">Random</a></li> 
 
     </ul> 
 
    
 
    </li> 
 
    <li><a href="#" class="menu2">Tutorials</a> 
 
    \t 
 
     <ul> 
 
     \t <li><a href="java.html" class="Java">Java</a></li> 
 
      <li><a href="css.html" class="Css">CSS</a></li> 
 
      <li><a href="html.html" class="HTML">HTML</a></li> 
 
      <li><a href="javascript.html" class="HTML">JavaScript</a></li> 
 
      <li><a href="elixer.html" class="HTML">Elixer</a></li> 
 
      <li><a href="swift.html" class="HTML">Swift</a></li> 
 
     \t </ul> 
 
    </li> 
 
    <li><a href="#">Videos</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
    
 
</ul> 
 
</body> 
 
<head> 
 
<canvas id="c"></canvas> 
 
</head> 
 

 
<body> 
 
<script type="text/javascript" src="../JS/tech.js"></script> 
 
</body> 
 
</head> 
 
</head> 
 
</html>

回答

2

你的问题是有点难以理解所以原谅我,如果这不是你想要的,但这里是一个小提琴,你可以看到如何修正您的标题顶部/左侧,以防止它滚动的内容:

.header { 
    height: 200px; 
    width: 100%; 
    background: red; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

.content { 
    height: 1000px; 
    margin-top: 200px; 
    background: green; 
} 

https://jsfiddle.net/x6gtb8rk/

1

我不知道到底是什么你的意思是在这里,但如果你要的是固定的报头停留在上滚动页面的顶部,那么你应该试试这个。

.header { 
height:50px; 
background:#000; 
border:1px solid #0F0; 
width:960px; 
position: fixed; 
margin-left: auto; 
margin-right: auto; 
left: 0; 
right: 0; 
top:0; 

}

测试了它上codepen保持固定,并在上滚动网页的顶部的中心位置。

+0

只需要在header-cont上加绝对值 –

相关问题