css导航栏固定在顶端 |jquery 动态添加css

.nav {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
z-index: 9999;
}

以上代码是一个简单的CSS样式，将一个导航栏固定在了页面的顶端。具体来说，需要使用position: fixed;实现固定定位，top: 0;和left: 0;确定导航栏的位置，width: 100%;设置导航栏宽度为100%。为了避免导航栏被其他元素遮挡，可以设置z-index: 9999;来将导航栏置于最上层。

另外，固定在顶端的导航栏还需要注意一些细节，例如当页面滚动时导航栏应该保持固定不动，可以通过以下代码来实现：

.sticky {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
z-index: 9999;
/* 添加以下代码 */
transition: all 0.5s ease;
}
.sticky + .content {
padding-top: 70px;
}
.sticky.scroll {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

以上代码中，.sticky是需要固定在顶端的导航栏的样式，.sticky + .content是下方内容区域的样式，通过设置padding-top: 70px;来避免内容区域被导航栏遮挡。另外，通过添加transition和box-shadow等效果，可以为导航栏添加更好的用户体验。

综上所述，通过简单的CSS样式和注意细节，大家可以很容易地将导航栏固定在页面的顶端，为网站的用户提供更好的使用体验。