我需要制作一个粘性标题。我们在 computerclass 中用 CSS position: fixed 做了一个粘性页脚,效果很好。但我无法将粘性页脚的代码转换为粘性页眉。位置固定有效,但文章在标题下方滚动——这当然不美观。 当我应用在 Stackoverflow 上找到的 CSS 代码时,标题的图像移动到屏幕的左下角。这是 stackoverflow 上的代码:
top: 0;
left: 0;
width: 100%;
height: 3.5em;
padding:0;
margin: 0;
我有一个标题、一些空格、一篇文章和一个旁白。这是我在文章下方使用并滚动的标题的 CSS 代码:
CSS:
body {
width: 960px;
margin-right: auto;
margin-left: auto;
color: #5B493D;
}
header {
height: 200px;
margin-right: auto;
margin-left: auto;
position: fixed;
width: 100%;
position: fixed;
}
#whitespace {
height: 200px;
width: 100px;
}
article {
width: 70%;
}
aside {
float: right;
width: 25%;
margin-left: 5%;
}
这就是我们在类里面为粘性页脚所做的,效果很好:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav">
<a href="#">Home</a> <a href="#">About</a>
<a href="#">News</a> <a href="#">Special Offers</a>
<a href="#">Content</a> <a href="#">Links</a>
<a href="#">Extra link</a>
</div>
<div id="article"></div>
<div id="footer"></div>
</div>
<div id="whitespace"></div>
<div id="sticky"></div>
</body>
还有一些 CSS:
#article {
background-color: #6CC;
height: 500px;
}
#footer {
background-color: #399;
height: 90px;
}
#sticky {
height: 200px;
background-image: url(../images/bottom.png);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-position: center center;
}
#whitespace {
height: 200px;
width: 100px;
}
有人知道如何“合并”页脚和页眉以使页眉有效,并且页眉图像不会向左向下移动到屏幕吗? (我不需要粘性页脚,只需要粘性页眉)。 更困难的是:该网站必须具有响应能力。
最佳答案
如果将位置设置为 fix,该元素将从 css 流中删除,因此文章在标题下方滚动是正常的。一个快速的解决方法是简单地为您的标题设置背景。
如果我误解了你的问题,你可以包含一个 jsfiddle/codepen 链接以使其更容易理解吗?
关于css - 制作一个固定 CSS 位置的粘性标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35878391/