使用 CSS 和 PHP 和 HTML 使 Header 变粘

Question

我的 header 来自 function.php 文件，该文件在 return 中为页面布局做了回显 <<<EOT。

该部分如下所示：

echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
<header>

显然，CSS 和 JS 有 <link> 标签 - 但为简短起见，这就是它的样子。然后，在 CSS 中，我尝试了很多不同的方法来使 header 变粘。

截至目前，header 的 CSS 如下所示：

header {
position: relative;
border-bottom: 2px solid #fff;
}

我试过把它改成这个（没有成功）：

position: fixed;
top: 0;
width: 100%;
background-color: #333;

关于如何在不影响页面布局的其余部分的情况下使 header 具有粘性的任何想法？需要说明的是，我删除了缓存什么的，但似乎没有任何效果。

我什至尝试给 header 一个 class / ID 并以此方式设置样式，但这也没有任何作用。

Answer 1

使用position: sticky使元素...粘滞：

header {
  position: sticky;
  border-bottom: 2px solid #fff;
  top: 0;
  width: 100%;
  background-color: #333;
}

Answer 2

header{
    position: sticky;
    top: 0;
}

Answer 3

<div class="sticky-header">Home | About | Contact</div>
<div class="content-scroll">
    <p>Scrollable content with sticky header:</p>
    <p>This example is for showing sticky header on page scroll.</p>
    <p>CSS styles are used to control sticky header on scrolling.</p>
    <p>It can be done by using some client'-side scripting languages.</p>
    <p>For example, we can use jQuery library for obtaining ticky header.</p>
</div>
<style>
    .sticky-header {
        background-color: #000;
        color: #fff;
        width:100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 10px;
        text-align:left;
        letter-spacing: 3px;
    }
    .content-scroll{
        height:1000px;
        padding:100px 0px 0px 50px;
    }
    .content-scroll p{
        height:50px;
    }
    </style>

使用 CSS 和 PHP 和 HTML 使 Header 变粘

Make Header Sticky Using CSS with PHP and HTML

html

css

header

sticky