右侧带返回顶部的的小导航栏

Posted 2021-01-23 makeupforever-carrie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了右侧带返回顶部的的小导航栏相关的知识，希望对你有一定的参考价值。
效果如图：
技术分享图片
悬浮改变效果
技术分享图片
点击咨询留言
技术分享图片
悬浮显示一个div
技术分享图片
点击回到顶部页面慢慢滚动到顶部
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右侧导航栏</title>
    <style>
        .side-nav{
            position: fixed;
            top:50%;
            right: 20px;
        }
        .side-nav{}
        .side-nav li{
            width: 45px;
            height: 30px;
            padding: 5px;
            list-style: none;
            background: #9F9F9F;
            font-size: 20px;
            color:white;
            border: 1px solid #dddddd;
            cursor: pointer;
        }
        /*弹窗1*/
        .btn-pop{
            background-color: #ffd475;
            border-radius: 10px;
            border:0px;
            zoom:200%;

        }
        #background-pop{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #background-pop1{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #div-pop{
            background:#ffffff;
            width:30%;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
        }
        #div-pop1{
            background:#ffffff;
            width:360px;
            height: auto;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
        }
        .div-top{
            width: 100%;
            height: auto;
            background-color: #cfcfcf;
            color: #ffffff;
        }
        .div-top div{
            padding: 3px 5px 5px 8px;
        }
        .div-top span{
            color: white;
            margin-bottom: 10px ;
            padding-right: 10px ;
            cursor: pointer;
            float: right;
        }
        .div-content{

            width: auto;
            height: auto;
            overflow: auto;
        }

        .div-content ul li{
            list-style: none;
        }

        #weChatImg{

            display: none;
            position: fixed;
            top:65%;
            right: 72px;
        }
        #phoneDiv{
            display: none;
            text-align: center;
            font-size: 14px;
            color:#9F9F9F;

            position: fixed;
            top:60%;
            right: 72px;
            width:120px;
            height: 140px;
            background: url("images/contact_pig.png") no-repeat;
            background-size:cover;
            padding: 1em;
            line-height: 1.5em;
        }
        #phoneDiv span{
            text-align: left;
            color: #404040;
            width: 100%;
        }
        .advisory-btn{
            padding: 3px 10px;
            margin: 10px 0px;
            border-radius: 5px;
            border:none;
            background: #01aaed;
            color:#ffffff;
            font-size: 18px;

        }
        .contact-div{
            border: 1px solid #9F9F9F;
            height: 110px;
            border-radius: 10px;
            margin: 15px 0 15px 25px;

        }
        .contact-top{
            padding: 5px;
            background: #01aaed;
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .contact-item{
            float: left;
            margin: 10px;
            line-height: 30px;
        }
        .contact-item img{
            margin-left:20px;
            width: 60px;
        }
    </style>
</head>
<body style="height: 5000px;background: #0C0C0C">
    <!--右侧浮动导航栏-->
    <div class="side-nav">
        <ul>
            <a>
                <li>
                    <span id="item1" onmouseover="function10()"onmouseout="function11()" onclick="show()">咨询</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item2" onmouseover="function20()"onmouseout="function21()" onclick="show1()">加盟</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item3" onmouseover="function30()"onmouseout="function31()">电话</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item4" onmouseover="function40()"onmouseout="function41()">微信</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item5" onmouseover="function50()"onmouseout="function51() "onclick="pageScroll()">顶部</span>
                </li>
            </a>
        </ul>
    </div>
    <!--咨询提示框 1-->
    <div id="background-pop">
    <div id="div-pop">
        <div class="div-top">
            <span id="close-button">×</span>
            <div>咨询留言</div>
        </div>
        <div class="div-content">
            <ul>
                <li class="advisory-box" >
                    <div id="advisoryRadio" type="radio" name="advisoryType" data-value="0" style=""> 咨询留言：</div>
                    <textarea name="reportInfo" id="elmaaa" class="feedback-text" rows="15" placeholder="请留下您咨询问题，客服会尽快给您联系。"style="width: 90%"></textarea>
                    <p>联系方式：</p>
                    <input type="text" placeholder="留个联系方式呗..." name="reportAddress" class="radio-text" id="reportAddress" style="height: 30px;width: 200px;">
                </li>
                <li>
                    <button class="advisory-btn">提交</button>
                </li>
            </ul>
    </div>
    </div>
    </div>
    <!--加盟咨询提示框 2-->
    <div id="background-pop1">
        <div id="div-pop1">
            <div class="div-top">
                <span id="close-button1">×</span>
                <div>加盟咨询</div>
            </div>
            <div class="div-content">
                <div class="contact-div">
                    <div class="contact-top">
                        区域：华北区、东北区、西北区
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                           联系人：解先生<br>
                           手机号：18916574912
                        </div>
                        <div class="contact-item ">
                            <img src="images/wechat-xie.png" />
                        </div>
                    </div>
                </div>
                <div class="contact-div">
                    <div class="contact-top">
                        区域：华南区、华中区、西南地区
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                            联系人：梁先生<br>
                            手机号：18014037816
                        </div>
                        <div class="contact-item ">




                            <img src="images/wechat-liang.png" />
                        </div>
                    </div>
                </div>
                <div class="contact-div">
                    <div class="contact-top">
                        区域：华东区、港澳台
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                            联系人：周先生<br>
                            手机号：15050135222
                        </div>
                        <div class="contact-item ">
                            <img src="images/wechat-zhou.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--关注微信1-->
        <div id="weChatImg">
        <img src="images/wechat-bg.png">

    </div>
    <!--客服电话-->
    <div id="phoneDiv">
        <span>客服电话</span><br>
        0755-32914245
        <span>客服QQ</span><br>
        2083392091
        <hr>
        <span>手机</span>
        18014037816
    </div>
</body>
<script>
    // item1 鼠标悬浮 文本 ：咨询--》点击咨询更改背景色为蓝色，
    function function10(){
        document.getElementById("item1").innerHTML="咨询留言";
        document.getElementById("item1").parentElement.style.height="50px";
        document.getElementById("item1").parentElement.style.background="#01aaed"
    }
    function function11(){
        document.getElementById("item1").innerHTML="咨询";
        document.getElementById("item1").parentElement.style.height="30px";
        document.getElementById("item1").parentElement.style.background="#9F9F9F"
    }
    // item2 鼠标悬浮 文本 ：加盟--》咨询加盟更改背景色为蓝色，
    function function20(){
        document.getElementById("item2").innerHTML="咨询加盟";
        document.getElementById("item2").parentElement.style.height="50px";
        document.getElementById("item2").parentElement.style.background="#01aaed"
    }
    function function21(){
        document.getElementById("item2").innerHTML="加盟";
        document.getElementById("item2").parentElement.style.height="30px";
        document.getElementById("item2").parentElement.style.background="#9F9F9F"
    }
    // item3 鼠标悬浮 文本 ：电话--》联系我们更改背景色为蓝色 显示电话信息，页面，
    function function30(){
        document.getElementById("item3").innerHTML="联系我们";
        document.getElementById("item3").parentElement.style.height="50px";
        document.getElementById("item3").parentElement.style.background="#01aaed"
        document.getElementById("phoneDiv").style.display="block";
    }
    function function31(){
        document.getElementById("item3").innerHTML="电话";
        document.getElementById("item3").parentElement.style.height="30px";
        document.getElementById("item3").parentElement.style.background="#9F9F9F"
        document.getElementById("phoneDiv").style.display="none";
    }
    // item4 鼠标悬浮 文本 ：微信--》关注微信更改背景色为蓝色，
    function function40(){
        document.getElementById("item4").innerHTML="关注微信";
        document.getElementById("item4").parentElement.style.height="50px";
        document.getElementById("item4").parentElement.style.background="#01aaed"
        document.getElementById("weChatImg").style.display="block";
    }
    function function41(){
        document.getElementById("item4").innerHTML="微信";
        document.getElementById("item4").parentElement.style.height="30px";
        document.getElementById("item4").parentElement.style.background="#9F9F9F";
        document.getElementById("weChatImg").style.display="none";
    }
    // item4 鼠标悬浮 文本 ：咨询--》点击咨询更改背景色为蓝色，
    function function50(){
        document.getElementById("item5").innerHTML="返回顶部";
        document.getElementById("item5").parentElement.style.height="50px";
        document.getElementById("item5").parentElement.style.background="#01aaed"
    }
    function function51(){
        document.getElementById("item5").innerHTML="顶部";
        document.getElementById("item5").parentElement.style.height="30px";
        document.getElementById("item5").parentElement.style.background="#9F9F9F"
    }
    // 弹框
    var div = document.getElementById(‘background-pop‘);
    var close = document.getElementById(‘close-button‘);
    function show(){
        div.style.display = "block";
        div1.style.display = "none";
    }
    close.onclick = function close() {
        div.style.display = "none";
    }
    window.onclick = function close(e) {
        if (e.target == div) {
            div.style.display = "none";
        }
    }
    // 加盟弹框
    var div1 = document.getElementById(‘background-pop1‘);
    var close1 = document.getElementById(‘close-button1‘);
    function show1(){
        div1.style.display = "block";
        div.style.display = "none";
    }
    close1.onclick = function close() {
        div1.style.display = "none";
    }
    window.onclick = function close(e) {
        if (e.target == div){
            div1.style.display = "none";
        }
    }
    //返回顶部
    function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
        window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
        scrolldelay = setTimeout(‘pageScroll()‘,100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
        var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
        if(sTop==0) clearTimeout(scrolldelay);
    }
</script>
</html>
以上是关于右侧带返回顶部的的小导航栏的主要内容，如果未能解决你的问题，请参考以下文章
BootStrap有用代码片段（持续总结）
带 2 行的 Bootstrap 4 导航栏
模态segue推动顶部的附加导航栏滑动
将数据从活动传递到底部导航栏的片段
如何在 Swift 的导航栏顶部显示自定义视图？
微信顶部导航栏字体颜色