Header 不粘在屏幕顶部

Question

我正在这个移动网站上工作：hannelorefischer.com

但是，header 没有粘在屏幕顶部。这是我的代码：

<div class="show" style="position: -webkit-sticky; position: sticky;  top: 0; display:none; margin-top: 250px; text-align: center; font: Italic 18px/29px 'pensumpro-book'; letter-spacing: 0px; color: #000000; opacity: 1;"><a href="#aktuelles">Aktuelles</a>&nbsp; &nbsp; &nbsp; <a href="#buecher">Bücher</a>&nbsp; &nbsp; &nbsp; <a href="#texte">Texte</a>&nbsp; &nbsp; &nbsp; <a href="#biographie">Biographie</a></div>

我在这里可能是错的，但我相信当容器 div 关闭时它会停止工作。

此外，我正在用 .load() jquery 召唤 header 部分。

有什么想法吗？

Answer 1

将这些属性添加到您的 header id

header

{

position: sticky;
top: 10;
text-align: center;
font: Italic 18px/29px 'pensumpro-book';
letter-spacing: 0px;
color: #000000;
opacity: 1;

}

Answer 2

改用这个 <div class="show" style="position: fixed; top: 0; display:none; margin-top: 250px; text-align: center; font: Italic 18px/29px 'pensumpro-book'; letter-spacing: 0px; color: #000000; opacity: 1;"><a href="#aktuelles">Aktuelles</a>      <a href="#buecher">Bücher</a>      <a href="#texte">Texte</a>      <a href="#biographie">Biographie</a></div>

Answer 3

尝试添加这个属性:

z-index: 2;

Header 不粘在屏幕顶部

Header not sticking to the top of the screen

html

javascript

css

sticky

header