我的標題來自 function.php 檔案，作為回報，它對<<<EOT頁面布局進行了回顯。
該部分如下所示：
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
<header>
顯然，<link>有 CSS 和 JS 的標簽——但為了保持簡短，這就是它的外觀。然后，在 CSS 中，我嘗試了許多不同的方法來使標題具有粘性。
截至目前，標題的 CSS 如下所示：
header {
position: relative;
border-bottom: 2px solid #fff;
}
我試過把它改成這個（沒有成功）：
position: fixed;
top: 0;
width: 100%;
background-color: #333;
關于如何在不影響頁面布局的其余部分的情況下使標題具有粘性的任何想法？只是要清楚，我已經洗掉了快取，但沒有洗掉，但似乎沒有任何效果。
我什至試圖給標題一個類/ID 并以這種方式設定樣式，但這也沒有任何作用。
uj5u.com熱心網友回復：
使用position:sticky來制作一個元素 ...sticky：
header {
position: sticky;
border-bottom: 2px solid #fff;
top: 0;
width: 100%;
background-color: #333;
}
uj5u.com熱心網友回復：
header{
position: sticky;
top: 0;
}
uj5u.com熱心網友回復：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397290.html
下一篇：如何為每個選項卡添加圖示？