js固定div在屏幕最右边

原创 2015年07月07日 14:06:30
<!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>

h5的div布局问题

1、div的高度自适应问题: 通过JS实现高度按比例的呈现在整个布局,函数如下: function rfresizeHeight(domid,xwidth,xheight){ var r...
  • LvandDuan
  • LvandDuan
  • 2015年09月14日 11:28
  • 1849

JS固定侧边栏教程总结

JS固定侧边栏教程总结 教程来自慕课网http://www.imooc.com/video/1019 固定侧边栏的基本思路: 计算侧边栏的实际高度,当滚动高度+可视页面高度大于侧边栏...
  • souzy
  • souzy
  • 2016年02月12日 16:46
  • 1440

最全的CSS浏览器兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格...
  • dragonlkl
  • dragonlkl
  • 2016年03月11日 18:26
  • 104

css教程

一. 基本语法 1. CSS的语法:CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。语法: selector {prop...
  • hulefei29
  • hulefei29
  • 2008年08月26日 11:06
  • 635

Div固定在屏幕右边的指定位置

#divCollapse {     display:none;     bottom: 40px;     right: 3px;             /*举例右边3像素*/     ...
  • limlimlim
  • limlimlim
  • 2013年09月27日 11:35
  • 9234

js实现div固定在屏幕的某一个位置

要实现div块固定在屏幕的某一个位置可以使用js来实现,这个实现比较简单,下面来看下效果: 原理就是监听window对象的onscroll事件,获取鼠标移动了多少距离,然后给这个需要固定的di...
  • SuperVictim
  • SuperVictim
  • 2016年07月13日 12:16
  • 2663

js使用技巧6

179.【文件(F)】菜单中的命令的实现 1、〖打开〗命令的实现 [格式]:document.execCommand("open") [说明]这跟VB等编程设计中的webbrowser控件中...
  • yj1300918200
  • yj1300918200
  • 2012年03月14日 10:31
  • 162

控制左边栏div高度自动改变 和右边div一样高

無標題文件 window.onload=function(){ document.getElementById("left").style.height = document...
  • XTQueen_up
  • XTQueen_up
  • 2015年01月08日 16:50
  • 2474

左右div内容互换(单击左边div里的一项内容,此内容变没,跑到右边div中)

昨天重构页面,发现个小问题,算是电子商务常见的一种效果吧,在网上找了好久没有找到,后来就自己用jQuery写了出来,但是还是有点小问题:单击左边div中的内容,此内容跑到右边div中,但是在单击右边d...
  • ly2983068126
  • ly2983068126
  • 2015年10月20日 09:53
  • 1197

怎么使页面div慢慢的出现,从右边淡出来

这个可以用纯css实现 把animate.css    在class 加类名     class="container animated fadeInRight" 即可 把下面复制到命名...
  • qq_22823581
  • qq_22823581
  • 2017年02月21日 13:54
  • 1129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js固定div在屏幕最右边
举报原因:
原因补充:

(最多只允许输入30个字)