关闭

js固定div在屏幕最右边

526人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title>demo</title>
<link href="file/do1.css" rel="stylesheet" media="screen" type="text/css">
<script src="file/jquery-1.10.1.min.js"></script>
<script>
    $(function(){
        (function(){
            //ie6特别处理
            if( ![1,] &&  !new XMLHttpRequest()){
                $('.leftToolBar').css({
                    'right':5,
                    'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
                });
            //窗口改变事件
                $(window).on('resize scroll',function(){
                    $('.leftToolBar').css({
                        'right': 5,
                        'top' :  ($(window).height() - $('.leftToolBar').outerHeight())/2+ $(window).scrollTop()    
                    
                    });
                });
            
                }else{
                    $('.leftToolBar').css({
                        'right':5,
                        'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
                });
            //窗口改变事件
                $(window).on('resize scroll',function(){
                    $('.leftToolBar').css({
                        'right': 5,
                        'top' :  ($(window).height() - $('.leftToolBar').outerHeight())/2
                    
                    });
                });
    
            }
            
        
        //over事件
            $('.gzh').each(function(_index){
                $(this).on({
                    mouseover:function(){
                        switch(_index)
                        {
                            case 0:
                                  $(this).find('.qr_tooldiv,.qt_tooldiv').css('display','block');            $('.qr_tooldiv2').css('display','none');
                                  break;
                            case 1:
                                  $('.qr_tooldiv2').css('display','block');
                                $('.qr_tooldiv,.qt_tooldiv').css('display','none');
                                  break;
                            default:
                                  return ;
                        }
                },
                mouseout:function(){
                    switch(_index)
                    {
                        case 0:
                              $(this).find('.qr_tooldiv,.qt_tooldiv').css('display','none');            $('.qr_tooldiv2').css('display','none');
                          break;
                        case 1:
                              $('.qr_tooldiv2').css('display','none');
                            $('.qr_tooldiv,.qt_tooldiv').css('display','none');
                          break;
                        default:
                              return ;
                    }
                }
            })
        })
    })();    
})
</script>
</head>
<body style="height:5000px;">
  <div id="leftToolBar" class="leftToolBar">
   <div id="gongzhonghao_wrap"  class="gzh">
    <div id="gongzhonghao" class="tooldiv" >
     <img src="file/left_icon01.png" class="k_png">
     <p>微信号</p>
     <div style="display: none;" class="qr_tooldiv">
         <img alt="" src="file/qr_home.png"><p>微信扫码,获取产品帮助</p>    
     </div>
     <div style="display: none;" class="qt_tooldiv">
         <img alt="" src="file/qt_home.png">
        <p>微信扫码,加入微信交流群</p>
     </div>
    </div>
   </div>
   
   
   <div id="gongzhonghao2_wrap" class="gzh">
    <div id="gongzhonghao2">
     <div class="tooldiv">
      <img title="" alt="" src="file/left_icon02.png" class="k_png">
      <p>用户QQ群</p>
     </div>
     <div style="display:none" class="qr_tooldiv2">
      <div>请加企微产品咨询群</div>
      <div class="qq1"><p>群10:<a target="_blank" href="file/group.png" alt="" title="" border="0"></a></p><span>群10: 459020424</span></div>
         <div class="qq1"><p>群9:467665662(已满)</p></div>
           <div class="qq1"><p>群8:263463(已满)</p></div>
    <div class="qq1"><p>群7:417040(已满)</p></div>
    <div class="qq1"><p>群6:245576542(已满)</p></div>

    <div class="qq1"><p>群5:437937934(已满)</p></div>
    <div class="qq1"><p>群4:57650844(已满)</p></div>
    <div class="qq1"><p>群3:154835442(已满)</p></div>
    <div class="qq1"><p>群2:220629533(已满)</p></div>
    <div class="qq1"><p>群1:53863114(已满)</p></div>
</div></div></div>

</body></html>

<style>

body,ul,li,ol,p,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }
body{ font-size: 14px; font-family:Arial,"Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif; line-height: 1.5; color: #666666; word-break: normal; word-wrap: break-word; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; }
ol,ul { list-style: none; }
img{ border:none; max-width: 100%; }
a{ text-decoration: none; color: #666; outline: none; }
a:hover,a:focus{ outline: none; }
ul.nav { margin-top: 10px; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


/*在线客服*/
.leftToolBar { position: fixed; _position:absolute; right: 5px; top:0; }
.tooldiv { background: none repeat scroll 0 0 #1f96b8; border-bottom-left-radius: 10px; border-top-left-radius: 10px; color: #ffffff; cursor: pointer; height: auto; margin-bottom: 10px; position: relative; text-align: center; width: 85px; }
.leftToolBar a { color: #f87b00; }
.qr_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 10px; bottom: 0; color: #666; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #000}
.leftToolBar .qr_tooldiv2 { background: none repeat scroll 0 0 #fdfdfd; border-radius: 5px; box-shadow: 0 0 8px #ccc; color: #333333; left: -207px; position: absolute; top: -170px; padding: 15px; }
.qt_tooldiv > img,.qr_tooldiv > img{ width: 190px; height: 190px; }
.leftToolBar p { margin: -5px 0 0 0; }
.qt_tooldiv,.qr_tooldiv,.qr_tooldiv2{ border-radius: 5px; color: #666; padding: 10px; margin: 5px 0; box-shadow: 0 0 8px #ccc; border: 1px solid #ccc}
#gongzhonghao, #gongzhonghao2{ border-radius:0; width: 80px; padding: 10px 0; font-size:12px; }
.tooldiv{ width: 100%; background:none; }
.qq1,.qq3 { clear: both; margin-top: 5px; }
.qq1 > p { font-size: 14px; height: 25px; line-height: 25px; margin: 0; vertical-align: top; }
.qq1 img { vertical-align: middle; }
.qq1 > span,.qq2 > span,.qq3 > span{ color: #999; font-size: 12px; margin-left: 30px; }
.qq2 > p,.qq3 >p{ margin: 0; }
.qq2 img { vertical-align: middle; }
.qt_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 5px; top: 82px; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #ccc}
.e95e45{ color: #e95e45; }
#nav_wrap a.new span { background: none repeat scroll 0 0 red; border-radius: 3px; color: white; font-size: 10px; height: 18px; left: 18px; line-height: 18px; position: absolute; text-align: center; top: 17px; width: 36px; }
#nav_wrap a.new{ position: relative; padding-left: 50px; }
 #navbar { background: none repeat scroll 0 0 #f8f8f8; border-radius: 0; position: fixed; top: 0; width: 100%; z-index: 10; }
.nav_fixed { position: fixed; top: 0; width: 100%; z-index: 9; }
#nav_wrap{ width: 100%; }
#gongzhonghao_wrap,#gongzhonghao2_wrap { width: 100px; background: url(../images/transparent.png) repeat; }
#gongzhonghao { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; cursor: pointer; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; }
#gongzhonghao2 { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; display: block; }


</style>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15680次
    • 积分:369
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:10篇
    • 译文:0篇
    • 评论:0条