<html>
<head>
<title>div固定位置，不随滚动条滚动</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">我永远在这里，哪也不去</div>
<div class="virtual_body">
<div style="height:888px;">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
滚动条是把杀猪刀
</div>
</div>
</body>
</html>
分享到：
相关推荐
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。...
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
本篇文章将介绍如何实现不随滚动条滚动而滚动的浮动效果，也就是说，即使滚动条滚动，浮动元素也会固定在浏览器窗口的某个位置不变。 实现不随滚动条滚动而滚动的浮动效果需要使用CSS中的position属性。position...
在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...
网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...
在本案例中，"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果，即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见，这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果，通常需要结合...
在网页设计中，有时我们需要创建一种效果，使得某些元素如客服图标或浮动菜单在用户滚动页面时始终保持在屏幕的特定位置...通过掌握固定定位，开发者能够轻松地创建出随滚动条滚动并可自定义位置的效果，提升用户体验。
在网页设计中，"div不随滚动条的滚动而动"是一种常见的布局需求，通常用于创建固定定位元素，如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性...
2. **固定高度与宽度**：为了让`div`在上下拉动滚动条时保持固定，我们需要设定它的高度，确保它能覆盖整个页面或指定区域。同样，设置适当的宽度以适应内容。 ```css div { width: 200px; /* 自定义宽度 */ ...
">我是随滚动条滚动的div</div> ``` 接下来，我们需要监听滚动事件。在JavaScript中，可以使用`addEventListener`方法绑定`scroll`事件。当用户滚动页面时，该事件会被触发。 ```javascript document....
<div id="fixedDiv">我是一个随滚动条移动的div</div> <!-- 填充一些内容以产生滚动 --> 这里是大量的内容…… $(document).ready(function() { var $fixedDiv = $('#fixedDiv'); var initialTop = $...
总结来说，要创建一个不随滚动条滚动而始终保持在页面底部的div元素，我们使用了CSS的position属性，并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置，同时设置width和...
在网页设计中，有时我们需要创建一种特殊的广告展示方式，即“不随滚动条滚动的固定层广告”。这种广告设计能够始终出现在用户视野中，无论页面如何滚动，它都会固定在屏幕的某个位置，如顶部、底部或侧边栏。本文将...
### div随着滚动条滚动，但是到了顶部，便不随着滚动了 #### 背景介绍 在网页设计中，有时我们需要让某个元素（如`<div>`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...
在探讨“网页背景图片位置不随滚动条改变”的主题时，我们深入研究了HTML与CSS技术如何协同工作，实现一种视觉上固定不变的背景效果。这一技术不仅提升了网页的美观度，还增强了用户体验，尤其是在浏览长页面时，...
而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当...
本教程将详细讲解如何使用jQuery实现一个简单的层（div）随滚动条移动的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
【标题】"qq客服随滚动条滚动"是一个关于网页设计和JavaScript实现的专题，主要涉及到的是如何让网页上的QQ客服窗口随着用户滚动页面而始终保持在视野范围内。这通常是为了提供更好的用户体验，确保用户在浏览网站时...
在网页设计中，实现“不...总之，"不随滚动条滚动广告代码"涉及了HTML5用于构建广告结构，CSS实现固定定位和样式设计，以及jQuery进行交互和动画处理。通过这些技术的结合，我们可以创建出既美观又实用的固定广告效果。
在网页设计中，有时我们...本文将详细讲解如何利用jQuery实现`DIV`随滚动条滚动的效果。 首先，我们需要引入jQuery库。在HTML文件中，我们可以在`<head>`部分添加如下代码来引用jQuery 1.7.2的最小化版本： ```html ...