js固定div在屏幕最右边

最新推荐文章于 2023-07-05 15:27:13 发布
最新推荐文章于 2023-07-05 15:27:13 发布
阅读量5.8k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu_mouse/article/details/46788685
版权
<!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>

hu_mouse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 点击侧边栏展示内容_侧栏菜单点击其中一项，在右侧显示如何通过js实现？...
weixin_39806808的博客
12-22 885
菜鸟教程(runoob.com)angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above th...
js怎么获取一个元素与屏幕右边的距离_js如何获取div（ul li）离屏幕上下左右边距离（长度）...
weixin_39622655的博客
12-21 4224
在网页中移到元素div(或 ul li)，常常需要获取元素div离屏幕上下左右的距离，这样可以知道元素处在屏幕中的位置，以控制元素的移动。获取元素div的长度或高度，可以用 js 获取元素div的width或height属性得到，但元素没有距离屏幕上下左右的属性，应该如何获取元素div(ul li)离屏幕上下左右边距离(长度)？javascript 有一个用 getBoundingClientRe...
三个div元素在同一行靠右排列
Web魔法师
02-06 2万+
首先，定义一个大的div包括这三个div，这个大的div属性设置 然后，把左边和中间的div设置为，把最右边的div设置成： 经过上面设置，即可把三个div排列在同一行。 源代码如下：                         创建任务             创建版本任务             创建其他任务                  
API6中JS UI实现富文本组件居右显示
最新发布
Mayism123的博客
07-05 483
RichText、富文本组件、API6、JS UI、居右显示。
js实现右侧导航栏 无刷新定位模块内容在屏幕中心显示方法
webqingyou的博客
10-13 293
点击右侧导航栏名称 定位对应的模块内容在屏幕中心显示 html代码 <template> <div class="box"> <div class="box1"> 蔡徐坤：唱跳，rap，打篮球 </div> <div class="box2"> 段奕宏：我喜欢的人在后面，是我们班那个人 </div> <div.
让某一个div固定在屏幕中的解决方法
09-25
在网页设计中，有时我们需要将某个`div`元素固定在屏幕的特定位置，例如右下角，以便在用户滚动页面时始终保持可见。标题和描述提到的"让某一个div固定在屏幕中的解决方法"主要涉及到CSS（Cascading Style Sheets）...
让DIV一直固定在屏幕的某个位置示例代码
09-25
此外，代码中还有一个JavaScript循环，用于生成100个数字，但这与固定`<div>`的位置无关，可能只是为了展示当页面内容滚动时，固定`<div>`依然保持在屏幕右下角的效果。 总的来说，要让一个`<div>`元素固定在屏幕的...
始终在屏幕中间显示Div的代码(css+js)
10-28
始终在屏幕中间显示Div的代码/css+js) 在Web开发中，需要在屏幕中间显示一个Div元素，这是非常常见的需求。今天，我们将讨论如何使用CSS和JavaScript来实现这个功能。 知识点一：使用CSS实现absolute定位 在CSS中...
JS简单实现DIV相对于浏览器固定位置不变的方法
10-22
在网页开发中，有时我们需要创建一个元素（如一个`DIV`），使其在用户滚动页面时始终保持在浏览器的特定位置，这种效果通常被称为“固定定位”或“吸附效果”。JavaScript 提供了动态改变元素位置的能力，使得我们...
悬浮固定DIV悬浮固定DIV
11-21
在网页设计中，"悬浮固定DIV"是一种常见的技术，它使得某个DIV元素在页面滚动时始终保持在屏幕的特定位置，如侧边栏导航、广告条或工具提示等。这种效果可以增强用户体验，使用户在浏览长页面时也能方便地访问或查看...
css把容器级别（div…）标签固定在一个位置（在页面最右边）
12-13
代码如下所示： .process{ border:1px solid #B7B7B8; background:#F8F8F8; width:80px; height:250px; <!--固定定位--> 　　position: fixed; 　　right:0; 　　text-align: center; } 没有滚动条时候： 有滚动条时候： 总结 以上所述是小编给大家介绍的css把容器级别（div…）标签固定在一个位置（在页面最右边），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站
select文字靠右显示
qq_38132995的博客
08-16 774
<select dir="rtl"> select { direction: rtl; // 文本方向右到左 } select option { direction: ltr; // 文本方向左到右 }
利用js实现右侧悬浮框
自学前端开发
06-14 1133
例子：屏幕右侧悬浮框 原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + “px”; 浏览器窗体的高度 document.documentElement.clientHeight 浏览器滚动的高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; html内容区 <
js实现滚动条默认滚动到右边
weixin_46389242的博客
06-12 2004
js实现滚动条默认滚动到右边。
重新认识——CSS Position定位
非互联网Coder
04-21 455
CSS定位
【js常用方法】
Alice_Max的博客
03-22 463
arr.reverse()强调文本 强调文本加粗文本 加粗文本标记文本删除文本H2O is是液体。210 运算结果是 1024.链接: link.图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 . 生成一个适合你的列表 项目 项目 项目 项目1 项目2 项目3 计划任务 完成任务 创建一个表格 一个简单的表格是这么创建的：使用居中 使用居左 使用
如何让div靠右_如何让div靠右
weixin_39715834的博客
12-30 1万+
可以使用“text-align:right;”属性让div里文字靠右。新建html文档，在body标签中添加div标签，然后为div标签设置宽高和边框属性：在div标签中输入文字，这时默认情况下div里面的文字靠左居中：为div标签添加属性“text-align: right;”一个DIV里，一边靠左，一边靠右，怎么实现？如题所示，想要实现同一行里，一边是向左对齐，一边是向右对齐，注意，概述利用f...
vue中将按钮设置到网页最右边
热门推荐
小懒魔王的博客
07-04 2万+
<el-row :gutter="12"> <el-col :span="24"> <el-card shadow="always" class="cardstyle"> 靠港需求发布 <el-button type="success" class="button1" style="padding-right:10px"> 从Excel导入</el-button> .
点击左侧导航菜单，在右侧动态显示页面
weixin_44070283的博客
12-30 1639
网页嵌套
固定three.js在屏幕中的位置
06-02
固定three.js在屏幕中的位置可以通过CSS样式来实现。首先，将three.js渲染器的canvas元素放置在一个父容器中，然后使用CSS样式来设置父容器的位置、宽度和高度。以下是一个简单的示例代码： ```html <template> <div class="scene-container"> <canvas ref="canvas"></canvas> </div> </template> <script> import * as THREE from 'three'; export default { name: 'FixedThreeScene', data() { return { scene: null, camera: null, renderer: null, cube: null, }; }, mounted() { this.init(); this.animate(); }, methods: { init() { // 创建场景 this.scene = new THREE.Scene(); // 创建相机 this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.camera.position.z = 5; // 创建渲染器 this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas }); this.renderer.setSize(this.$refs.canvas.clientWidth, this.$refs.canvas.clientHeight); // 创建立方体 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); this.cube = new THREE.Mesh(geometry, material); this.scene.add(this.cube); }, animate() { requestAnimationFrame(this.animate); this.cube.rotation.x += 0.01; this.cube.rotation.y += 0.01; this.renderer.render(this.scene, this.camera); }, }, }; </script> <style> .scene-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } canvas { width: 100%; height: 100%; } </style> ``` 以上代码创建了一个Vue组件，包含了一个ref为canvas的canvas元素。在init方法中，使用WebGLRenderer的canvas选项将渲染器的canvas元素设置为组件中的canvas元素。在animate方法中，使用requestAnimationFrame函数来更新立方体的旋转并渲染场景。在样式中，将父容器设置为position: fixed，top: 0，left: 0，width: 100%，height: 100%，并将z-index设置为-1，将其固定在屏幕中间。然后将canvas元素的宽度和高度设置为100%。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值