左边导航的制作（置顶）

标签：style   blog   http   color   java   os   io   2014   

一：页面代码

<!--网页侧边栏登录,客服,购物车-->
<a name="top"></a>
<div id="rightnav" class="right_lan">
    <div class="lan_con">
        <div class="ever_one">
            <a href="/login.html?ReturnUrl=/detail/${productInfo.ProductCode}.htm">登录</a></div>
        <div>
            <a href="/carlist.html" class="ever_two"><em>0</em></a></div>
        <div class="ever_three">
            <a href="javascript:consult();">客服</a>
            <script type="text/javascript">
                function consult() {
                    document.getElementById("ccservicebar").click();
                }
            </script>
        </div>
    </div>
    <div id="back-to-top" class="lan_top">
        <a href="#top">顶部</a></div>
</div>

二：Css样式

/*侧边栏（购物车，客服）*/
.right_lan{ position:fixed;right:0; _right:-1px; top:0; width:35px; height:100%;_height:400px; background:#fff; border-left:1px solid #ddd; z-index:88; }
/* 修正IE6振动bu*/
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .right_lan{position:absolute;right:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop))}

.lan_con{ top:25%; width:35px; position:absolute; }
.ever_one{  width:35px; height:60px; }
.ever_one a{cursor:pointer; text-align:center; display:block; padding-top:35px; color:#666;background:url(/img/rightlan-login.png) no-repeat 3px 0; }
.ever_two{ width:35px; height:71px; padding-left:8px; margin-top:20px; margin-left:-7px; display:block; position:relative; background:url(/img/rightlan-car.png) no-repeat; margin-top:20px;}
.ever_two em{ width:25px; text-align:center; color:#ffea00; padding-top:3px; font-style:normal; font-weight:bold; display:block;}
.ever_three{ width:35px; height:60px; }
.ever_three a{text-align:center; display:block; padding-top:35px; color:#666;background: url(/img/rightlan-kef.png) no-repeat 3px 0; margin-top:20px;}
.lan_top{ width:35px; position:absolute; bottom:15%; background:url(/img/rightlan-top.png) no-repeat 8px 0;}
.lan_top a{text-align:center; display:block; padding-top:30px; color:#aaa;}

三：Js样式

    /*显示右边导航*/
    $("#rightnav").fadeIn(1500);
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $("#back-to-top").fadeIn(1500);
        }
        else {
            $("#back-to-top").fadeOut(1500);
        }
    });
    $("#back-to-top").click(function () {
        $(‘body,html‘).animate({ scrollTop: 0 }, 1000);
        return false;
    });

四:来一张效果图

左边导航的制作（置顶）,布布扣,bubuko.com

左边导航的制作（置顶）

标签：style   blog   http   color   java   os   io   2014   

原文地址：http://www.cnblogs.com/lidj/p/3896519.html