Html - 仿QQ空间右下角工具浮动块

Posted 2020-06-29

仿QQ空间右下角工具浮动块

 

<style type="text/css">
        .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text {
            display: none;
            margin-top: 15px;
            text-align: center;
            text-decoration: none;
        }
        .cy-tp-area>.cy-tp-fixbtn {
            background-color: #fafafa;
            color: #8c8c8c;
        }
        .cy-tp-area>.cy-tp-fixbtn>.cy-tp-icon {
            display: block;
            height: 25px;
            margin: 10px auto 0;
            width: 25px;
        }
        .cy-tp-area>.cy-tp-fixbtn:hover>.cy-tp-text {
            display: block;
        }
        .cy-tp-area>.cy-tp-fixbtn:hover>.cy-tp-icon {
            display: none;
        }
        .fix-layout {
            bottom: 20px;
            position: fixed;
            right: 20px;
            z-index: 20;
            font-size:12px;
            line-height: 1.334;
        }
        .cy-tp-area {
            width: 45px;
            border: 1px solid #d9d9d9;
        }
        .cy-tp-area>.cy-tp-fixbtn {
            display: block;
            height: 45px;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            border-bottom: 1px solid #d9d9d9;
        }        
        .cy-tp-area>.cy-tp-returntop>.cy-tp-icon {
            background-image: url("<%= RootUrl%>/Images/fixed.png");
            background-position: -315px 0;
        }                
        .cy-tp-area>.cy-tp-returnindex>.cy-tp-icon {
            background-image: url("<%= RootUrl%>/Images/fixed.png");
            background-position:-372px 0;
        }
    
    </style>

<div class="fix-layout">
            <div class="cy-tp-area">
                <a  href="javascript:;" onclick="$cy.Main_BLL.T001.scrolltop()" class="cy-tp-fixbtn cy-tp-returntop" >
                    <i  class="cy-tp-icon" ></i>
                    <span class="cy-tp-text">顶部</span>
                </a>
                <a href="<%= RootUrl %>/Modules/T00X/T001/CP.aspx" class="cy-tp-fixbtn cy-tp-returnindex">
                    <i class="cy-tp-icon" style="display:none" ></i>
                    <span class="cy-tp-text" style="display:block">首页</span>
                </a>
            </div>
    </div>


<script type="text/javascript" language="javascript">
    $j(window).scroll(function () {    //有时是这个选择器 document        
        if (($j("body").height() - $j("body").scrollTop()) <= document.documentElement.clientHeight || ($j("body").height() - $j("body,html").scrollTop()) <= document.documentElement.clientHeight) {
            $j(".fix-layout").animate({
                right: $j(window).width() - 80
            }, 1000);
        }
        else
        {
            $j(".fix-layout").animate({
                right: "20px"
            }, 1000);
        }
})
</script>