javascript - 是否有可能在 css 中使固定主体不滚动？-6ren

javascript - 是否有可能在 css 中使固定主体不滚动？

转载作者：太空宇宙更新时间：2023-11-03 22:41:35

我有一个功能齐全的矩阵背景，但我只想让我的标题随着滚动条移动，每次我将 .content 部分更改为不同的位置时，它会完全取消矩阵(矩阵不是'它实际上不是背景，它更像是其他一切背后的区域。

<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 {
	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 {
	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>
 
	<div class="content">
	  <table width="960" border="1">
	    <tbody>
	      <tr>
	        <td width="338" height="180"><img src="file:///home/146971/Desktop/bigstock-128312288-1024x794.jpg" width="338" height="180" alt=""/></td>
	        <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>
	          <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>
	        <td width="289" rowspan="3">&nbsp;</td>
          </tr>
	      <tr>
	        <td height="180"><img src="file:///home/146971/Desktop/watch.jpg" width="338" height="180" alt=""/></td>
	        <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>
	          <p style="font-weight: normal">By: <span style="font-style: italic">Michael Esch</span> / May 2</p>
	          <p style="font-weight: normal">&nbsp;</p>
	          <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>
	      <tr>
	        <td height="180"><img src="file:///home/146971/Desktop/jive.jpg" width="338" height="180" alt=""/></td>
	        <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>
	      <tr>
	        <td height="180">&nbsp;</td>
	        <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>
	        <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
	  <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>
    	
        <ul>
        	<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>    	
    <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>
    	
        <ul>
        	<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>
       	</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>

最佳答案

你的问题有点难以理解，所以如果这不是你想要的，请原谅，但这里有一个 fiddle ，你可以在其中看到如何将标题固定到顶部/左侧，以防止它随内容滚动:

.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/

关于javascript - 是否有可能在 css 中使固定主体不滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43760510/

文章推荐： html - 响应式图像容器

文章推荐： c# - 通过 Serilog 在 Azure 上记录 ASP.NET Core

文章推荐： php - 为什么使用redis进行websocket通信？

文章推荐： c# - NET Core Cors 抛出错误

「降本」有可能，「增效」不确定
降本手段一招鲜，增效方法吃遍天； 01 互联网行业里；降本策略千奇百怪，手段却出奇一致；增效方法五花八门，手段更是花里胡哨；对于企业来说；
javascript - AngularJS中的 Controller 有可能(部分类)概念吗？
有什么方法可以使用 angularjs 中的部分进行代码分组吗？原因 --- 我的 Controller 包含太多代码。该 Controller 包含了多个方法和大量功能的代码，降低了代码的可读性。
sql - 有可能 "Select N times"吗？
不幸的是，我的数据库的数据模型必须改变，所以我正在寻找最轻松的方式来迁移我的数据。此时情况如何: create table cargo{ id serial primary key, per
c++ - 有可能 "update"一个 QTextCursor 吗？
在 QTextEdit 对象中，假设我想知道字符在鼠标光标下的位置。我会写... void MyQTextEditObject::mousePressEvent(QMouseEvent* mouse
c++ - 有可能 "return a return statement"吗？
是否可以在 C++ 中返回一个 return 语句或做一些具有类似功能的事情？例如，如果代码中有几个函数将指针作为输入，并且每个函数都检查指针是否为 nullptr，这将很方便。如果它是一个 nul
c# - 有可能 signalR 客户端网络连接另一台 PC 上的服务器吗？
我的 PC 上有一个控制台应用程序，它是 signalR 服务器。我有一个 html 页面，它是互联网上的 signalR 客户端。但我尝试连接服务器，但我有一个错误的请求 400 错误。如果服务器
android - 应用程序打开为 "background process"。有可能 react native 吗？
我想将应用程序作为后台进程运行。当点击应用程序图标时，它不会显示任何 View ，只会启动后台进程。最佳答案对于 iOS 这是不可能的，但是对于 android，react native 有 he
java - Android开发 : Visual Studio + Java. 有可能(值得一试)吗？
我知道有(昂贵的)框架可以让你在 VS C# 中编写 android 应用程序并将其编译为 android apk。我也知道，可以在 VS 中编写 Java 应用程序(link)。是否有可能，甚至
ruby-on-rails - 有可能 CanCan can :manage, :all except one or more method?
我在做: can :manage, :all if user.role == 'admin' can :approve, Anuncio do |anuncio| anuncio.try(:apr

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 是否有可能在 css 中使固定主体不滚动？