<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e宝账--帮助中心</title>
<script type="text/javascript">
function scrollx(p) {
var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;
if (o) {
cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssPub + ('right:'+p.r+'px;');
} else {
o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
}
if(p.f&&ie6){
cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssRight + cssTop;
} else {
o.style.cssText += cssTop;
}
dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
}else{
if(!p.f){
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
var st = (dd.scrollTop||db.scrollTop),c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
if(c!=0){
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
}else{
clearInterval(timer);
}
},10)
}
}
}
}
}
</script>
</head>
<body>
<div style="width:700px; margin:0 auto; height:1000px; background:#ccc">
<div id="float_father">相对固定</div>
<div id="float_father_2">相对固定（动）</div>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div id="float_left">左侧固定</div>
<div id="float_right">右侧固定</div>
<script type="text/javascript">
//左右侧固定浮动的div建议放在html的最低部
//右侧固定
scrollx({id:'float_right', r:0, t:200, f:1});
//左侧固定
scrollx({id:'float_left', t:200, f:1});
//相对父级相定固定
scrollx({id:'float_father', l:300, t:200, f:1});
//页面滚动同时滚动固定对像
scrollx({id:'float_father_2', l:500, t:300, f:0});
/*
scrollx参数说明
id：浮动对象的id
r：右边距（窗口右边距，不写为靠左浮动）
l：左边距（距离父级对象的左边距） “r”和“l”只能有其中一个参数
t：上边距（默认贴着底边，0是贴着顶边）
f：1表示固定（不写或者0表示滚动）
*/
</script>
</body>
</html>
分享到：
相关推荐
在网页设计中，"悬浮固定DIV"是一种常见的技术，它使得某个DIV元素在页面滚动时始终保持在屏幕的特定位置，如侧边栏导航、广告条或工具提示等。这种效果可以增强用户体验，使用户在浏览长页面时也能方便地访问或查看...
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。...
在网页设计中，"DIV滚动悬浮层"是一种常见的交互效果，它使得某个元素（通常是一个包含重要信息或功能的div）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...
<div class="floating-div">悬浮的div</div> <canvas id="myCanvas"></canvas> ``` 3. **JavaScript交互**： 如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，...
Div是HTML中的一个布局容器，用于组织网页内容，而悬浮层则是通过CSS和JavaScript技术来实现动态效果和位置固定。下面我们将深入探讨Div悬浮层的设计与实现。 一、HTML基础 Div（Division）是HTML中的一个块级元素...
在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...
`DIV固定位置` 的概念指的是将一个 `div` 元素设置为固定定位（fixed positioning），使其在页面上保持在特定的位置，即使用户滚动页面，该 `div` 也不会移动。这种技术在创建导航栏、侧边栏或固定通知等元素时特别...
本教程将介绍如何创建一个简单的网页右侧固定悬浮的客服按钮，该按钮使用HTML5语言进行编写，并且易于定制。 首先，我们关注的是“悬浮效果”。在网页设计中，悬浮效果指的是元素始终保持在屏幕的特定位置，即使...
**jQuery超强div固定位置布局特效插件** 在网页设计中，动态布局是提升用户体验的关键因素之一。这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果，如固定侧边栏、顶部导航或者浮动按钮...
在本主题“CCS固定位置，DIV固定位置”中，我们将深入探讨如何使用CSS来实现元素在页面上的固定定位，特别是关于`div`元素的固定定位。 首先，理解CSS的定位模式是关键。有四种基本的定位方式：正常流（Normal Flow...
jquery.floatdiv 浮动层固定位置 /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置...
在网页设计中，"div悬浮"是一种常见的效果，它使得某个div元素在用户滚动页面时始终保持在屏幕的特定位置，通常用于侧边栏导航、广告条或其他需要固定显示的元素。这个实例是基于jQuery库来实现的，jQuery是...
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
绝对支持IE6 IE7 IE8 和 FF的div层在页面左边固定不动，右边的div层超过页面高度正常滚动。
磁悬浮技术在日常生活中主要应用于高速列车等领域，但在这个场景中，我们讨论的是一个与网页设计相关的主题——“磁悬浮DIV”（Floating DIV）。在网页设计中，DIV元素是一种非常重要的布局工具，它允许开发者通过...
2. **计算位置**：动态计算`<div>`元素的顶部和左侧偏移量，使其位于屏幕中央。 3. **响应式调整**：当浏览器窗口大小发生变化时，重新计算并调整`<div>`的位置。 #### 代码实现 首先定义了一个自定义方法`center`...
初始状态下，导航菜单可能被设置为相对定位，随着页面滚动，通过JavaScript改变其定位为固定（`position: fixed`），这样即使用户滚动页面，菜单也会保持在屏幕的某个位置。同时，为了适应不同的屏幕尺寸，可能还...
本文将详细讲解如何利用jQuery实现一个蓝色的固定div悬浮在线客服代码，以及相关的技术要点。 首先，我们需要理解“固定div”是什么。在网页布局中，固定定位（fixed positioning）可以让元素始终位于浏览器窗口的...
四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果四种悬浮DIV提示效果
本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...