网页右边导航栏

项目要求写导航栏 做个记录方便以后用到。

效果大致是 鼠标移上就出来 ，移走就半隐藏。

效果就是这样。 废话少说 上代码

css ：

 .div-xuanfu1, .div-xuanfu2, .div-xuanfu3{
                z-index: 999;
               position: absolute;
                width: 100px;
                height:100px;
                border-radius: 50px;
                background-color: #F16412;
                margin-top: 100px;
                color:white;
                line-height:100px;
                text-align: center;
                right:-50px;
                font-size: 20px;
            }
             .div-xuanfu1{
                 top:100px;
            }
            .div-xuanfu2{
                 top:200px;
            }
             .div-xuanfu3{
                 top:300px;

            }

html5:

 <div id="xuanfu" class="div-xuanfu1">
                         质询
                   
    </div>
    
    <div id="xuanfu2" class="div-xuanfu2">
                         查询
                   
    </div>
     <div id="xuanfu3" class="div-xuanfu3">
                         测试
                   
    </div>

扫描二维码关注公众号，回复： 2459910 查看本文章

    

js :

<script src="js/jquery-1.9.0.js"></script>

<script type="text/javascript">

var docWidth = document.documentElement.clientWidth;
    var bodywidth = document.body.clientWidth;
        $(document).ready(function () {
            $(window).scroll(function () {
                var Headerheight = $("#Header").height();
                console.log("Headerheight",Headerheight);
                if ($(window).scrollTop() >= Headerheight) {
                $("#xuanfu").css("top", $(window).scrollTop());    
                $("#xuanfu2").css("top", $(window).scrollTop() + 100);    
                $("#xuanfu3").css("top", $(window).scrollTop() + 200);    
                }else {
                    $("#xuanfu").css("position", "absolute");
                }
            });
        });        
        $(function(){
 $("#xuanfu").mouseover(function(){
  $(this).animate({width:"100px",right:0},500);
 }).mouseout(function(){
  $(this).animate({width:"100px",right:-50},500);
 });
 
  $("#xuanfu2").mouseover(function(){
  $(this).animate({width:"100px",right:0},500);
 }).mouseout(function(){
  $(this).animate({width:"100px",right:-50},500);
 });
 
   $("#xuanfu3").mouseover(function(){
   $(this).animate({width:"100px",right:0},500);
 }).mouseout(function(){
  $(this).animate({width:"100px",right:-50},500);
 });

});

 </script>