在自己搭建纯html模板的时候,遇到了topBar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这两处dom替换成$('.layui-body')即可解决。位置如下图:
接着又出现了另一个问题,那就是返回顶部的功能失效了,看来还是没绑定到事件,于是将下图中的代码也替换掉即可:
顺便附上html中body代码:
<body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">Layui Template</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">测试1</a></li> <li class="layui-nav-item"><a href="">测试2</a></li> <li class="layui-nav-item"> <a href="javascript:;">测试3</a> <dl class="layui-nav-child"> <dd><a href="">测试31</a></dd> <dd><a href="">测试32</a></dd> <dd><a href="">测试33</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="Content/Images/qilongzhu.jpg" class="layui-nav-img"> EmptyGao </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退出</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="leftmenu"> <li class="layui-nav-item"><a href="Home.html">首页</a></li> <li class="layui-nav-item"> <a class="" href="javascript:;">测试一</a> <dl class="layui-nav-child"> <dd><a lay-id="11" href="javascript:;">测试1</a></dd> <dd><a lay-id="12" href="javascript:;">测试2</a></dd> <dd><a lay-id="13" href="javascript:;">测试3</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">测试二</a> <dl class="layui-nav-child"> <dd><a lay-id="21" href="javascript:;">测试1</a></dd> <dd><a lay-id="22" href="javascript:;">测试2</a></dd> </dl> </li> <li class="layui-nav-item"><a lay-id="3" href="">测试三</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div class="layui-tab layui-tab-brief" lay-allowClose="true"> <ul class="layui-tab-title"> <li id="indexPage" class="layui-this">首页</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <ul> <li><blockquote class="layui-elem-quote">引言</blockquote></li> <li> <fieldset class="layui-elem-field"> <legend>待解决问题</legend> <div class="layui-field-box"> <ul> <li>1、</li> <li>2、</li> <li>3、</li> <li>4、</li> <li>5、</li> </ul> </div> </fieldset> </li> <li> 默认分割线 <hr> 赤色分割线 <hr class="layui-bg-red"> 橙色分割线 <hr class="layui-bg-orange"> 墨绿分割线 <hr class="layui-bg-green"> 青色分割线 <hr class="layui-bg-cyan"> 蓝色分割线 <hr class="layui-bg-blue"> 黑色分割线 <hr class="layui-bg-black"> 灰色分割线 <hr class="layui-bg-gray"> </li> <li> 默认分割线 <hr> 赤色分割线 <hr class="layui-bg-red"> 橙色分割线 <hr class="layui-bg-orange"> 墨绿分割线 <hr class="layui-bg-green"> 青色分割线 <hr class="layui-bg-cyan"> 蓝色分割线 <hr class="layui-bg-blue"> 黑色分割线 <hr class="layui-bg-black"> 灰色分割线 <hr class="layui-bg-gray"> </li> </ul> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> © EmptyGao </div> </div> </body>