首页 > 知识 > layui固定块实现2个以上图标

layui固定块实现2个以上图标

layui提供的固定块功能,语法:util.fixbar(options),默认只有2个图标,如果需要2个以上的图标,可以自己去写

式样代码

<style>
.custom-footer {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 999999;
}
.custom-footer li {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 30px;
    background-color: #9f9f9f;
    color: #fff;
    border-radius: 2px;
    opacity: .95;
}
</style>

网页代码

!!!<ul class="custom-footer">
    <li class="layui-icon" style="background-color:rgba(0,0,0,0.2)">
        &#xe642;
    </li>
    <li class="layui-icon" style="background-color:rgba(0,0,0,0.2)">
        &#xe653;
    </li>
    <li class="layui-icon" id="top" style="background-color: rgba(0, 0, 0, 0.2); display: none;" onclick="topFunction()">
        &#xe604;
    </li>
</ul>!!!

JS代码

<script>
// 当网页向下滑动 200px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {console.log(121);
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("top").style.display = "block";
    } else {
        document.getElementById("top").style.display = "none";
    }
}
 
// 点击按钮,返回顶部
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

上一篇: layui加载页面时追加class样式

下一篇: PHP获取多层级菜单

联盟广告