大家好，我在滚动时遇到困难，基本上让它“固定”了。我已经将CSS设置为固定，如下所示，但滚动时标题仍然消失。
HTML PAGE
<title>Final Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
<body>
**<div class="fixed">
<h1>Packit<br>
<style>
.col-group {
overflow: hidden;
}
.col-group > div {
padding: 1em;
}
@media screen and (min-width: 44em) {
.col-group > div {
float: left;
width: 50%;
}
.col-group > div:nth-child(odd) {
clear: left;
}
}
@media screen and (min-width: 50em) {
.col-group > div {
float: left;
width: 33.3333333%;
}
.col-group > div:nth-child(3n+1) {
clear: left;
}
.col-group > div:nth-child(odd) {
clear: none;
}
}
@media screen and (min-width: 70em) {
.col-group > div {
width: 20%;
}
.col-group > div:nth-child(odd), .col-group > div:nth-child(3n+1) {
clear: none;
}
}body h1 {
font-size: 12em;
}
body h1 {
font-size: 3em;
}
body h1 {
font-size: 16em;
}
body h1 {
font-size: 16px;
}
body h1 {
font-size: 12px;
}
</style>
<link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">
Hi there. We are here to help.</h1>
</div>**
CSS PAGE
/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/
/************Reset**************/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, object, iframe, fieldset {
margin: 0;
padding: 0;
border: 0;
}
input, select
{
width: 120px;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header, footer, nav, section, article, hgroup, figure {
display: block;
}
legend {
display: none;
}
/************End Reset**************/
/************Global**************/
.fixed
{ position:fixed;
top:0;
left:0;
width:100%;
margin:0 auto;
}
.form
{ position:fixed;
margin: auto;
width: auto;
line-height: 1;
}
body {
background: #fff;
color: #000;
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
padding: 0;
-webkit-text-size-adjust: none;
}
a {
color: #808080;
text-decoration: none;
}
a:hover, a:focus {
color: #e51837;
}
p {
margin: 0 0 1em;
}
img, object, video {
max-width: 100%;
border: 0;
}
a img {
border: 0;
outline: 0;
}
h1 {
font-size: 3em;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 0.2em;
}
h2 {
font-size: 2em;
line-height: 1.1;
margin-bottom: 0.2em;
}
h3 {
font-weight: normal;
line-height: 1.1;
padding-bottom: 0.4em;
border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
display: block;
color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
color: #e51837;
}
blockquote {
border-left: 0.5em solid #ddd;
padding-left: 1em;
margin-left: 1em;
}
small {
color: #e51837;
}
input[type=search] {
-webkit-appearance: none;
border-radius: 0;
}
::-webkit-input-placeholder {
color: #808080;
}
:-moz-placeholder {
color: #808080;
}
/************End Global**************/
/************Classes**************/
.inactive {
color: #ddd;
}
/************End Classes**************/
/************Structure**************/
.container {
max-width: 70em;
margin: 0 auto;
padding: 0 1em;
overflow: hidden;
}
div[role=main] {
padding-bottom: 1em;
}
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
position: fixed;
z-index: 2;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] .nav li a {
display: block;
border-bottom: 1px solid #808080;
padding: 1em;
margin: 0 -1em;
}
footer[role=contentinfo] a {
display: inline-block;
padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
color: #fff;
}
footer[role=contentinfo] .f-rga {
padding: 0.6em 0;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: inline-block;
margin-bottom: -0.22em;
}
/*End Footer*/
/*Grid*/
.grid {
margin: 0 -1em;
overflow: hidden;
}
.grid:target {
-webkit-animation: fadeout 5s 1 ease-out;
-moz-animation: fadeout 5s 1 ease-out;
-o-animation: fadeout 5s 1 ease-out;
animation: fadeout 5s 1 ease-out;
}
.grid > h2 {
margin-left: 0.45em;
}
.grid > section {
padding: 1em 1em 0.5em;
}
.grid > section:target {
-webkit-animation: fadeout 5s 1 ease-out;
-moz-animation: fadeout 5s 1 ease-out;
-o-animation: fadeout 5s 1 ease-out;
animation: fadeout 5s 1 ease-out;
}
.grid ul {
overflow: hidden;
}
.grid ul li {
margin-bottom: 0.3em;
}
.featured:after {
content: "*";
color: #e51837;
}
/*Fluid*/
.fluid {
display: block;
margin: 0 auto;
max-width: 40em;
}
/*Homepage*/
.home h1 {
margin-bottom: 0.2em;
}
.intro {
font-size: 1.8em;
line-height: 1.2;
margin: 0 auto;
}
.intro a:hover ,.intro a:focus {
color: #000;
border-bottom-color: #000;
}
.ani {
position: relative;
height: 15em;
margin: 1em 0 0;
width: 100%;
z-index: 0;
}
.ani div {
width: 100%;
}
.ani div b {
display: block;
position: absolute;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
background: rgba(229,24,55,0.22);
}
/*Patterns*/
.mod {
padding: 1em;
}
.pattern {
background: #f7f7f7;
border-bottom: 1px solid #808080;
margin-bottom: 1em;
overflow: hidden;
}
.pattern-description h1 {
font-size: 3.4em;
margin-bottom: 0.5em;
}
.pattern-description {
max-width: 40em;
margin: 0 auto;
}
.pattern-description ul, .pattern-description ol {
margin-bottom: 2em;
}
.pattern-description li {
margin-bottom: 1em;
}
/*Blog*/
/*Blog Header*/
.blog .container {
max-width: 62em;
}
.blog header[role=banner] {
overflow: hidden;
margin-bottom: 2em;
padding: 2em 0 1em;
border-bottom: 1px solid #000;
}
.blog-logo {
font-weight: normal;
font-size: 1.2em;
margin: 0 0 1em;
}
.blog-logo img {
width: 3.3em;
}
.blog-logo a {
color: #000;
}
.search-form {
width: 100%;
margin-bottom: 1em;
}
.search-field {
width: 100%;
padding: 0.5em 0;
border: 0;
border-bottom: 1px solid #808080;
outline: none;
}
.search-field:focus {
background: #e51837;
color: #fff;
}
.search-field:focus::-webkit-input-placeholder {
color: #fff;
}
.search-field:focus :-moz-placeholder {
color: #fff;
}
.blog .nav {
clear: both;
}
.blog .nav a {
display: block;
font-weight: bold;
color: #000;
}
.blog .nav a:hover {
color: #e51837;
}
/*Posts*/
.posts ol > li {
padding-bottom: 1em;
border-bottom: 1px solid #ccc;
margin-bottom: 1em;
overflow: hidden;
}
.posts h2 {
font-size: 1.4em;
margin: 0.28em 0 0.1em;
font-weight: normal;
}
.posts h2 a {
color: #000;
}
.posts h2 a:hover, .posts h2 a:focus {
color: #e51837;
}
.permalink {
display: block;
font-size: 0.8em;
margin-bottom: 1.2em;
}
.post-body a {
border-bottom: 1px solid #ccc;
}
.posts blockquote {
margin: 0 0 1em;
color: #666;
border-left: 0.25em solid #ccc;
padding-left: 1em;
}
.tags {
float: left;
}
.tags li {
display: inline-block;
font-size: 0.8em;
margin-right: 0.5em;
}
.posts ol > li .tags a, .permalink {
color: #ccc;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
color: #808080;
}
.blog-nav {
text-align: center;
overflow: hidden;
padding: 1em 0;
}
.posts .blog-nav a {
border: 0;
}
.nav-next {
float: right;
}
.nav-prev {
float: left;
}
/* Sidebar */
.sidebar {
font-size: 0.8em;
padding-bottom: 1.4em;
}
.sidebar div {
margin-bottom: 2em;
}
.sidebar h3 {
font-weight: bold;
font-size: 0.9em;
line-height: 1;
border-bottom: 1px solid #000;
}
.sidebar a {
color: #808080;
}
.sidebar a:hover, .sidebar a:focus {
color: #e51837;
}
.social-links {
overflow: hidden;
}
.social-links li {
float: left;
margin-right: 1.2em;
}
.social-links li a {
display: block;
height: 17px;
width: 16px;
text-indent: -99999em;
background: url(images/sprite_social.png) no-repeat;
}
.social-links li a.s-fb {
background-position: -0px -76px;
}
.social-links li a.s-fb:hover {
background-position: -16px -76px;
}
.social-links li a.s-twitter {
background-position: -0px -37px;
}
.social-links li a.s-twitter:hover {
background-position: -16px -37px;
}
.social-links li a.s-linkedin {
background-position: -0px -113px;
}
.social-links li a.s-linkedin:hover {
background-position: -16px -113px;
}
.social-links li a.s-rss {
background-position: -0px -0px;
}
.social-links li a.s-rss:hover {
background-position: -16px -0px;
}
.top {
clear: both;
display: block;
padding: 1em 0;
}
.top:before {
content: '▲';
}
/******Media Queries*******/
/* Medium Screens*/
@media all and (min-width: 35em) {
.blog-logo {
float: left;
font-size: 2em;
margin: 0 0 1em;
}
.blog-logo img {
width: auto;
}
}
@media all and (min-width:40em) {
h1 {
font-size: 5.6em;
}
.container {
padding-bottom: 4em;
}
footer[role=contentinfo] {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.8em;
}
footer[role=contentinfo] .nav li a {
border: 0;
}
footer[role=contentinfo] .f-rga {
float: right;
}
.grid ul li {
width: 50%;
float: left;
}
.grid ul li:nth-child(odd) {
padding-right: 1em;
clear: left;
}
.ani {
position: absolute;
top: 0;
right: 0;
bottom: 4em;
left: 0;
width: 100%;
height: 90%;
margin: 0;
z-index: 0;
}
.home {
position: absolute;
top: 0;
right: 0;
bottom: 5em;
left: 0;
z-index: 1;
width: 100%;
height: 90%;
display: table;
text-align: center;
color: #fff;
color: rgba(255,255,255,0.7);
}
.home > div {
display: table-cell;
vertical-align: middle;
}
.home .intro a {
color: #fff;
color: rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(255,255,255,0.8);
}
.home .intro a:hover, .home .intro a:focus {
color: #000;
border-bottom-color: #000;
}
/*Blog*/
.search-form {
float: right;
width: 30%;
max-width: 16em;
padding-left: 0.8em;
margin-top: 0.4em;
}
.posts {
float: left;
width: 64%;
}
.sidebar {
float: right;
width: 30%;
max-width: 21em;
margin: 0 0 1em;
padding-left: 0.8em;
}
}
/* Large Screens */
@media all and (min-width: 54em) {
h1 {
font-size: 6.4em;
}
.grid > section {
float: left;
width: 33.3333333%;
}
.grid > section:nth-of-type(3n+1) {
clear: left;
}
.grid ul li {
width: auto;
float: none;
}
.grid ul li:nth-child(odd) {
padding-right: 0;
}
}
/* CSS Animations */
@-webkit-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
@-moz-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
@-o-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
@keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
答案 0 :(得分：2)
您的案例中的问题是HTML代码的格式化，因此请改进它：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">
<script>
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
<style>
.col-group {
overflow: hidden;
}
.col-group > div {
padding: 1em;
}
// ... AND SO ON... //
</style>
<title>JS Bin</title>
</head>
<body>
<div class="fixed">
<h1>Packit</h1><br> // YOU DON'T CLOSED HERE THE H1 TAG
</div>
</body>
</html>
为什么不把你的css样式放在extern文件中而不是嵌入样式表？
答案 1 :(得分：1)
您遇到此问题的原因是您的HTML代码格式不正确。你在body部分有CSS样式表“Stylesheet2.css”，不幸的是外部样式表需要链接到头部，否则它们不起作用。同样不能说，但是通常的做法也是放在页面的部分。
答案 2 :(得分：0)
我遇到了与Chrome相同的问题，这似乎是一个错误，当页面内部有太多内容时，我可以通过将以下转换代码添加到固定位置元素来修复它，（ transform: translateZ(0);-webkit-transform: translateZ(0);）强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞起。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。
使用-webkit-transform：translate3d（0,0,0）;将使GPU转换为CSS转换的动作，使它们更平滑（更高的FPS）。
注意： translate3d（0,0,0）在您看到的内容方面没有任何效果。它在x，y和z轴上移动对象0px。这只是一种强制硬件加速的技术。
.fixed {
position: fixed;
background: white;
border-bottom: 2px solid #eaeaea;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
height: 80px;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}