bootstrap 实现吸顶效果_css实现吸顶效果

使用css实现吸顶效果很简单，position:sticky ,再设置相对应的top值就好了

但要注意，要做浏览器兼容 position: -webkit-sticky;

下面是代码的实现

Document

*{

margin: 0;

padding: 0;

list-style: none;

}

.wrap{

width: 100%;

height: 1000px;

}

.title{

width: 100%;

height: 300px;

text-align: center;

background: chocolate;

}

.nav{

/* 兼容chorme */

position: -webkit-sticky;

position: sticky;

top: 0px;

width: 100%;

height: 40px;

text-align: center;

background: chartreuse;

color: #fff;

}

.item-list{

width: 100%;

height: 20px;

display: inline-block;

background: cornflowerblue;

color: #fff;

}

css吸顶效果实现

导航吸顶导航吸顶导航吸顶导航吸顶

• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻
• 海上生明月天涯若比邻

实现效果

image.png

向下滚动

image.png