css 头部导航栏固定 |jinja2变量控制css

/* 以下是 HTML 和 CSS 代码示例 */
/* HTML 代码 */
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
/* CSS 代码 */
.navbar {
position: fixed; /* 使导航栏固定 */
top: 0; /* 将导航栏置于页面顶部 */
background-color: #333; /* 设置背景色 */
width: 100%; /* 设置导航栏宽度为100% */
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

以上代码示例中，通过设置导航栏为固定定位（position: fixed;）和将导航栏置于页面顶部（top: 0;），使导航栏固定在页面顶部。此外，也需要设置导航栏的宽度（width: 100%;）和设置导航栏样式，如背景色、字体颜色等。

如果想要实现导航栏在页面滚动到一定高度时才固定，可以使用 JavaScript 监听页面滚动事件，当滚动高度大于某个值时，将导航栏的 position 设置为 fixed。如下：

// 通过 JavaScript 监听页面滚动事件
window.addEventListener('scroll', function () {
// 获取页面滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断滚动高度是否大于某个值
if (scrollTop >100) {
// 将导航栏的 position 设置为 fixed
document.querySelector('.navbar').style.position = 'fixed';
} else {
// 将导航栏的 position 设置为 static
document.querySelector('.navbar').style.position = 'static';
}
});

通过 JavaScript 监听页面滚动事件，并使用 document.documentElement.scrollTop 或 document.body.scrollTop 获取页面滚动高度，再根据需求判断是否需要将导航栏的 position 设置为 fixed。

CSS 头部导航栏固定可以使页面更加美观，并为用户带来更好的体验。通过设置 CSS 样式或使用 JavaScript 代码，都可以实现这种效果。