Question

我需要制作一个粘性标题。我们用CSS postion在计算机类中做了一个粘性页脚：修复并且效果很好。但我无法将粘性页脚的代码转换为粘性标题。定位固定的作品，但文章滚动在标题下面 - 这当然不美观。当我应用我在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;
}

有谁知道如何'合并'页脚和标题以使标题正常工作，并且标题的图像没有向左移动到屏幕？（我不需要粘性页脚，只需要粘性标题）。使其变得更加困难：该网站必须具有响应能力。

Answer 1

如果设置要修复的位置，则会从css流中删除该元素，因此文章在标题下方滚动是正常的。一个快速的解决方法是简单地设置标题的背景。

如果我误解了你的问题，你可以在其中加入一个jsfiddle / codepen链接吗？

固定CSS位置制作一个粘性标题

1 个答案: