前端跟随浏览器滚动代码解析

2019/11/24 10:50:00  前端知识(更多)  889阅

准备：CSS/HTML

CSS代码：

.fixed{
position: fixed; /*滚动属性*/
background: #fff; /*背景颜色*/
width: 100%; /* 浏览器宽度 100%为当前浏览器宽度 */
z-index: 999; /* 样式置前 （防止被其他样式掩盖）*/
top: 0; /*设置位置 top:顶部，bottom:底部，left:左边，right:右边*/
height: 55px; /*高度*/
line-height: 55px; /*调整样式内对齐*/
border-bottom: 1px solid #eee; /*下划线*/
}
.left{
float: left; /*靠左*/
}
.right{
float: right; /*靠右*/
}
.height{ /*该样式为演示可忽略*/
display: block;
margin-bottom: 300%;
width: 100%;
}

把上面代码添加到：

如：
<#style type="text/css">
.right{
float: right; /*靠右*/
}
<#/style>

HTML代码：

<#div class="fixed">
<#div class="left">左<#/div>
<#div class="right">右<#/div>
<#/div>

<#div class="height"><#/div>
把#符号删掉

演示地址：前端跟随浏览器滚动代码解析