导航栏实现之滚动条,本博客的滚动条的其中一部分细节就是这个
<style>
.greyBox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ccc;opacity: 0.6;display: none;z-index: 8888;}
.productionBox{position: fixed;width: 600px;top: 10%;left: 50%;margin-left: -300px;border: 1px solid #e3e5f1;background-color: #fff;display: none;z-index: 9999;}
.title{width: 600px;text-align: center;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;}
.butBox{margin:15px;}
.butBox .addOnly{width: 80px;margin-right: 15px;margin-bottom: 10px;}
.addMain .inputBox{padding-left: 15px;margin-top: 10px;}
.addMain .inputBox input{width: 45%;height: 25px;line-height:25px;font-size: 16px;margin-left: 5px;margin-right: 5px;}
.h1Offset{
font-size: 14px;
padding-left: 5px;
}
.h1Offset,a{
color: black;
}
.h2Offset{
font-size: 12px;
padding-left: 32px;
}
.h2Offset,a{
color: black;
}
</style>
<!--隐藏的遮罩层-->
<div class="greyBox"></div>
<!--隐藏的生产批次选择窗口-->
<!-- 为了便于测试,设置最大高度200px时,出现滚动条 -->
<div class="productionBox" style="overflow-y: auto;overflow-x: auto; max-height:200px;">
<div class="title">文件主题</div>
<hr style="border: 1px dashed #ecf1f5;"/>
<div class="butBox">
<button class="addOnly addProduction">添加1级</button>
<button class="addOnly addProduction2">添加2级</button>
<button class="addOnly delProduction">删除</button>
</div>
<div class="addMain">
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function () {
$(".greyBox").show();//遮罩显现
$(".productionBox").show();
// 添加1级导航按钮触发事件,这边写死,实际场景中是动态的,3是动态的,SQL语句优化是动态的,2级导航同理
$(".addProduction").on("click",function () {
var str = '<li class="h1Offset"><span>3. </span><a href="#autoid-2-3-0" title="SQL语句优化">SQL语句优化</a><span class="sideCatalog-dot"></span></li>';
$(".addMain").append(str);
});
// 添加1级导航按钮触发事件
$(".addProduction2").on("click",function () {
var str = '<li class="h2Offset"><span>3.1. </span><a href="#autoid-2-3-1" title="SQL语句优化">show参数</a><span class="sideCatalog-dot"></span></li>';
$(".addMain").append(str);
});
// 删除按钮触发事件
$(".delProduction").on("click",function () {
$(".addMain").children(":last").remove();
});
})
</script>