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

标签 css header fixed sticky

我需要制作一个粘性标题。我们在 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/

相关文章:

javascript - 使用 jquery 获取的 url 参数扩展 Accordion 菜单并将 attr 添加到所需的类

php - 强制通过 header 缓存动态生成的 JS/CSS 文件不适用于所有浏览器

html - 如何在使用 css 自动分页后创建上边距?

html - 3 列 css 显示不正确的问题

html - Vuetify - 对齐 div、行和按钮的中心

c - 为什么要把代码放在标题中

css - 标题中的可点击图像

c++ - 为什么我不能将 fixed 和 setprecision() 与 +operator 一起用于字符串而不是 << operator 用于 cout

css - 如何在某个时候制作固定定位的 div?

html - 使固定的 div 在滚动的导航栏后面折叠