一、把以下样式放到</head>前面：

<style>
.bottom-nav {
    /* display: none; */
    background-color: #fafafa;
    box-shadow: 0 -1px rgba(0,0,0,0.1), 0 -2px 10px rgba(0,0,0,0.1);
}
.bottom-nav .opts-group {
    position: relative;
    display: inline-block;
    /* padding-top: 6px; */
    line-height: 20px;
    color: #9e9e9e;
    cursor: pointer;
}
.bottom-nav .opts-group.active {
    color: #da5b62;
}
@media screen and (min-width: 992px) {
    .bottom-nav, .header_seach_but {
        display: none !important;
    }
</style>

二、把以下js放到</html>后面：

<script type="text/javascript">
$(function() {
    setTimeout(function() {
        $.require('
https://www.google-analytics.com/ga.js', function() {
            try {
                var pageTracker = _gat._getTracker("UA-9784446-1");
                pageTracker._trackPageview();
            } catch (err) {}
        });
    }, 1000);
    setTimeout(function() {
        $(".bbs_home_page_three_col .small_logo").each(function(index, element) {
            if ($(element).children("a").length == 0) {
                $(".bbs_home_page_three_col .bbs_home_page_row_div").eq(index).children('div:first-child').removeClass("col-lg-8").addClass("col-lg-9");
                $(".bbs_home_page_three_col .bbs_home_page_row_div").eq(index).children('div:last-child').removeClass("col-lg-4").addClass("col-lg-3");
                $(".bbs_home_page_three_col .bbs_home_page_row_div").eq(index).children('div:first-child').children("span").css("width", "19rem");
            }
        })
    }, 2000);
    if (self != top) {
        $('#header').hide();
        $('#nav2').hide();
        $('#footer').hide();
    }
     // 导航
    var new_p = 0, start_scrollTop = 0;
        $(window).scroll(function(e){  
                new_p = $(this).scrollTop();  
                   
                if(start_scrollTop < new_p) {//下滚  
                    $('.header_fiexd').css("display","none");
                } else {//上滚  
                    $('.header_fiexd').css("display","block");
                }  
                setTimeout(function(){start_scrollTop = new_p;},0);         
        });
     
    // 返回顶部
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 500) {
            $('.act_go_top').fadeIn(300);
        } else {
            $('.act_go_top').fadeOut(300);
        }
    });
    $('.act_go_top').click(function() {
        $('html,body').animate({
            scrollTop: '0px'
        }, 100);
    });
    var m1 = 0;     // 滚动的值
    var m2 = 0;     // 对比时间的值
    var timer = null;
    document.onscroll = function() {
        clearTimeout(timer) // 每次滚动前 清除一次
        timer = setTimeout(Data, 2000);
        m1 = document.documentElement.scrollTop || document.body.scrollTop;
    }
    function Data() {
        m2 = document.documentElement.scrollTop || document.body.scrollTop;
        if(m2 == m1){
            $('.act_go_top').fadeOut(300);
        }
    }
});
</script>

三、把以下代码放到</footer>后面：

  <div class="position-fixed w-100 header_fiexd bottom-nav" style="width: 100%; height: 55px; bottom: 0; z-index: 2; background: #fafafa;">
    <div class="row mx-0 text-center align-items-center" style="height: 55px;">
        <a href="/" class="col" style="max-width: 20%;">
            <div>
                <i class="icon-home"></i>
            </div>
            <div>
                首页
            </div>
        </a>
        <a href="forum-1.htm" class="col" style="max-width: 20%;">
            <div>
                <i class="icon-venus"></i>
            </div>
            <div>
                女生
            </div>
        </a>
        <a href="forum-2.htm" class="col" style="max-width: 20%;">
            <div>
                <i class="icon-mars"></i>
            </div>
            <div>
                男生
            </div>
        </a>
        <a href="forum-4.htm" class="col" style="max-width: 20%;">
            <div>
                <i class="icon-venus-mars"></i>
            </div>
            <div>
                聘请
            </div>
        </a>
        <a href="my-notice.htm" class="col" style="max-width: 20%;">
            <div>
                <i class="icon-user"></i>
            </div>
            <div>
                我的
            </div>
        </a>
        
    </div>
</div>

注1：你只需要把以上代码放到上面说的那几个位置，然后把里面的链接、文字和图标替换为你自己的就行了。

注2：图标库：