css+div如何将淘宝客服悬浮固定在右下角，不随滚动条移动。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css+div如何将淘宝客服悬浮固定在右下角，不随滚动条移动。相关的知识，希望对你有一定的参考价值。

一般情况下都是用CSS的fixed固定定位，但不兼容IE6，在IE6下，用absolute方式。

下面给出简单的兼容写法代码实现。仅供参考：

<style>    
*margin:0px; padding:0px;    
body height:2000px    
div width:100px; height:100px; background:#ccc; position:absolute; bottom:0px; right:0px;    
</style>    
<script>    
window.onload=function()    
var oDiv = document.getElementById(\'div1\');    
if(window.navigator.userAgent.indexOf(\'MSIE 6\') != -1)    
    
window.onscroll = function()    
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    
var top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop;      
oDiv.style.top = top + \'px\';    
;
    
else    
    
oDiv.style.position=\'fixed\';    
    
;    
</script> 参考技术A 在你需要的那个框的css样式里面添加 position:fixed;属性追问

还是不行的，滚动条移动时还是在页面上移动

追答

你放的层不对，QQ空间和很多博客顶部都是用这个属性做出来的效果

追问

啊、还是弄不出来，你有这个的代码没 可以给我共享吗

追答

.head1
background-color: #4E283F;
color: #FFFFFF;
height: 25px;
line-height: 25px;
position: fixed;

.head1 a
color: #E0BB80;

.head1 span
padding-left: 7px;

.head1_left
float: left;
padding-left: 30px;

.head1_left a
padding-right: 20px;

.head1_right
float: right;
padding-right: 30px;

.head1_right a
padding-left: 10px;


92女性网92美容92时装92商城
你好，欢迎来到92!请登录注册

追问

谢谢了、可是 滚动条移动时他也在移动 我想做就像淘宝客服那悬浮旺旺 或者在下边固定的导航

追答

你这个框是在右下角啊，放foot上面就好了啊，悬浮框不会影响到它的

 参考技术B 这里有一个弹出框效果
能自定义定位并随屏滚动而不抖动
里面有教程和源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?6=s&id=12497

子集高度高于父级，要求父级右下角定位一个div，不随子集的滑动而变化位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>
.left {
width: 200px;
height: 100%;
background-color: yellow;
overflow:auto;
position: relative; /* 外面必须是非static定位，不是absolute相对于body */
}
.right {
flex-grow: 1;
height: 100%;
background-color: darkseagreen;
}

.update {
position: absolute; /* 绝对定位 */
right: 20px;
bottom: 20px;
}
.neibuDiv{
width:100%;
height:100%;//关键
overflow: auto;//关键
background-color: aqua;
}
.neibuDiv li{
height:50px;
}
</style>
</head>
<body style="margin:0px;">

<div style="width: 100%; height: 100%;display:flex;position:absolute;">
<div class="left">
<div class=‘neibuDiv‘>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</div>
<div class="update">

<a href="#">修改</a>
</div>
</div>
<div class="right">

</div>
</div>


</body>
</html>

以上是关于css+div如何将淘宝客服悬浮固定在右下角，不随滚动条移动。的主要内容，如果未能解决你的问题，请参考以下文章

求一段用js固定div在移动端底部不随页面滑动的代码 且不抖动

有两个div，一个父级，一个子级，父级有滚动条，样式如何写才能让子级的div固定在顶部，不随滚动条

请教如何通过CSS实现div的固定位置，不随页面滚动消失

css固定div头部不随滚动条滚动

CSS布局，子级DIV固定定位于父级DIV的右侧，不随浏览器的滚动而滚动

css Div在页面中纵向固定，不随滚动条滚动，横向随滚动条滚动