这里稍微总结一下，那就是利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点：
1、使用了大量的计算，每次滚动，都少不了一大堆的运算。
2、使用了JavaScript脚本，脚本这东西受到浏览器的限制，即便没有限制，也同样因为网页的下载模式问题，可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3、条条大路通罗马，但是看看那方块，当快速滚动滚动条的时候，会发现那个可爱的方块抖动地厉害。这也难怪，那么多的计算谁能受得了？
那有没有比较“平静”高效的表示方式呢？比如是否有一种用CSS的方式呢？
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed（详情请点击）。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的：
引用
fixed:
位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
于是我们很快就有了以下的代码，不过很遗憾，IE中并不能通过严格的测试，但是FireFox中却可以通过测试！
引用
<html>
<head>
<!--http://volnet.cnblogs.com-->
<title>Only fit FireFox!
</title>
<!--Some thing about the fixed style!-->
<style type="text/css">
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
</style>
</head>
<body>
<div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>
<div style="height:888px;"></div>
</body>
</html>
不管上面上面说的IE7的strict模式，很显然，除了IE7，我们的挑战还有包括IE6在内的一大堆未知的因素。很显然，虽然这个方法通过了FireFox，但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么？（我指的是用JavaScript的时候效果很卡）
当然不行，我们的症结究竟在哪？我们该如何去解除它呢？带着这样的郁闷，我们需要开始新的探险。
HTML究竟是啥？
这个问题换在别的地方问，您可能要搬出一大堆的文档来告诉我HTML的定义，但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的<tag></tag>组成的，而这一大堆的<tag></tag>组合在一起，它们的结构就像一棵树，是的，HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根，那就是<html></html>节（root），在根节点下常见的节点中，我们通常能见到<head></head>和<body></body>两个节点，它们之下又有……
现在回顾一下我们的问题，我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题，啥是滚动条？
滚动条，顾名思义，就是可以滚动的条（ScrollBar）（废话）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？（虽说是模拟，但是效果一模一样噢～）
引用
<html>
<head>
<title></title>
<style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</style>
</head>
<body>
<div class="fixed_div">I am still here!</div>
<div class="virtual_body">
<div style="height:888px;">
I am content !
</div>
</div>
</body>
</html>
分析：
html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。
.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。
.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
分享到：
相关推荐
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。...
标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效，当用户滚动页面时，某个特定的DIV元素（例如一个导航栏）会保持在屏幕顶部，即使页面其他部分向下滚动，这个元素依然固定在视口的顶部。...
这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，提供持续的可见性。这种设计被称为“固定定位”（fixed positioning）或“粘性布局”（sticky layout）。 在HTML中，`...
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
为了不让滚动条影响页面宽度，可以通过以下几种方法进行调整。 首先，可以通过调整body元素的宽度来实现，将body的宽度设置为与浏览器窗口的宽度相同。这样做的好处是无论滚动条出现与否，页面的宽度始终保持一致，...
本篇文章将介绍如何实现不随滚动条滚动而滚动的浮动效果，也就是说，即使滚动条滚动，浮动元素也会固定在浏览器窗口的某个位置不变。 实现不随滚动条滚动而滚动的浮动效果需要使用CSS中的position属性。position...
当需要控制div元素中的滚动条滚动到特定位置时，jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先，我们需要了解几个基本概念： 1. **div**: 在HTML中，div（division）是一...
DIV 滚动条是指在 DIV 元素中添加的滚动条，当内容超出 DIV 区域时，能够滚动查看内容。滚动条可以水平方向、垂直方向或同时具备水平和垂直方向的滚动功能。 如何实现 DIV 滚动条？ 要实现 DIV 滚动条，需要在 DIV...
例如，当用户滚动页面到一定程度时，让某个`div`元素固定在顶部，不再随页面滚动而移动。 #### 实现原理 要实现这一功能，主要涉及CSS中的`position`属性以及JavaScript对滚动事件的监听和处理。下面将详细解释实现...
在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...
在网页设计中，"固定div，滚动到顶部固定"是一种常见的布局技巧，它可以使特定的div元素在页面滚动时始终保持在视口的可见位置，通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验，因为用户...
在 `scroll` 函数中，我们更新滚动条的状态，并记录当前滚动位置。 优点和缺点 使用 ElementUI 的滚动条组件可以简化滚动条的实现，并提供了许多实用的配置选项来满足不同的需求。然而，滚动条组件也存在一些...
在网页设计中，"DIV滚动悬浮层"是一种常见的交互效果，它使得某个元素（通常是一个包含重要信息或功能的div）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...
在网页设计中，div元素是常用的布局容器，而滚动条则是当内容超出div范围时，帮助用户浏览更多内容的重要交互工具。"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来...
在前端开发中，有时我们需要实现一个功能，即在向某个特定的`div`容器内添加新内容后，使该`div`的滚动条自动滚动到最底部，以确保新添加的内容能够立即呈现在用户的视线范围内。本文将详细介绍三种实现这一目标的...
在本案例中，"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果，即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见，这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果，通常需要结合...
`，并指定`top`和`left`属性，该`div`就会固定在屏幕的相应位置，不随页面内容的滚动而移动。 2. **jQuery实现** jQuery提供了方便的DOM操作和事件处理，使得实现这个效果更简洁。可以监听窗口的滚动事件`$(window...
总结来说，要创建一个不随滚动条滚动而始终保持在页面底部的div元素，我们使用了CSS的position属性，并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置，同时设置width和...
在网页设计中，"div不随滚动条的滚动而动"是一种常见的布局需求，通常用于创建固定定位元素，如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性...
在Android平台上，开发一款手机版浏览器时，可能会遇到一个常见的问题：在特定情况下，网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...