css 头部置顶 |jq css隐藏显示

html {
scroll-behavior: smooth; /* 平滑滚动，非必须 */
}
/* 头部区域的样式 */
.header {
position: fixed; /* 固定在屏幕顶端 */
top: 0; /* 距离顶部0px */
width: 100%; /* 占据整个屏幕的宽度 */
background-color: #ffffff; /* 设置头部区域的背景色 */
z-index: 1000; /* 设置层级，确保在页面其它元素之上 */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
/* 页面主体区域的样式 */
.content {
padding-top: 80px; /* 确保头部不会覆盖主体区域 */
}

让头部区域固定在屏幕顶端需要使用CSS的position属性。通过设置position:fixed属性，可以让元素始终处于屏幕顶端，即使页面滚动时也不会移动。同时，top: 0;属性可以确保头部区域距离顶部0px，并占据整个屏幕的宽度。设置z-index属性可以确保头部处于页面的最顶层，不被其它元素遮挡。

当头部区域固定在屏幕顶端时，需要处理页面主体区域。通过设置padding-top属性，可以确保主体区域不会被头部所覆盖。这样用户在浏览页面时，就不会发现主体区域被头部所挡住的情况了。

当然，在页头中也可以加入一些交互元素，如导航菜单、搜索框、登录按钮等等，并通过CSS设置样式优化交互效果，让用户操作更加便捷和愉悦。