【webQD】☆★之固定DIV不随滚动条滚动
在项目开发中，有的页面的某些按钮，我们是不想让他跟着滚动条滚动的，比如，添加页面，有很长的内容添加，在往下滚动添加的过程中，我们始终想看到保存按钮。OK！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#nav{position:fixed; top:0;left:0; width:100%; background:#F00;}
</style>
</head>
<body>
<div>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<br/>xxxxxxxxx<br/>
<div id="nav">
效果
</div>
</div>
</body>
</html>
|
我们看一下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位！ok！
position:absolute，absolute是对网页边框而言的。
如果，你用absolute加上js代码也可以实现以上效果，但是你会发现随着滚动条滚动时，那个层会晃来晃去，所以采用这种position:fixed，是可以使层固定不动的一种做法！
我特意查了一下手册，貌似在IE6一下版本不行！
ok？
相关推荐
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
本篇文章将介绍如何实现不随滚动条滚动而滚动的浮动效果，也就是说，即使滚动条滚动，浮动元素也会固定在浏览器窗口的某个位置不变。 实现不随滚动条滚动而滚动的浮动效果需要使用CSS中的position属性。position...
网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...
在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...
在网页设计中，"div不随滚动条的滚动而动"是一种常见的布局需求，通常用于创建固定定位元素，如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性...
<div id="fixedDiv">我是一个随滚动条移动的div</div> <!-- 填充一些内容以产生滚动 --> 这里是大量的内容…… $(document).ready(function() { var $fixedDiv = $('#fixedDiv'); var initialTop = $...
">我是随滚动条滚动的div</div> ``` 接下来，我们需要监听滚动事件。在JavaScript中，可以使用`addEventListener`方法绑定`scroll`事件。当用户滚动页面时，该事件会被触发。 ```javascript document....
在本案例中，"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果，即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见，这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果，通常需要结合...
2. **固定高度与宽度**：为了让`div`在上下拉动滚动条时保持固定，我们需要设定它的高度，确保它能覆盖整个页面或指定区域。同样，设置适当的宽度以适应内容。 ```css div { width: 200px; /* 自定义宽度 */ ...
在网页设计中，有时我们需要创建一种效果，使得某些元素如客服图标或浮动菜单在用户滚动页面时始终保持在屏幕的特定位置...通过掌握固定定位，开发者能够轻松地创建出随滚动条滚动并可自定义位置的效果，提升用户体验。
### div随着滚动条滚动，但是到了顶部，便不随着滚动了 #### 背景介绍 在网页设计中，有时我们需要让某个元素（如`<div>`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...
<div class="fixed-ad">这里是不随滚动条滚动的广告</div> <!-- 更多页面内容... --> ``` 在这个例子中，`.fixed-ad`类定义了广告的样式，包括其`position: fixed;`属性，使其固定在屏幕顶部。你可以根据实际...
总结来说，要创建一个不随滚动条滚动而始终保持在页面底部的div元素，我们使用了CSS的position属性，并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置，同时设置width和...
在网页设计中，有时我们...本文将详细讲解如何利用jQuery实现`DIV`随滚动条滚动的效果。 首先，我们需要引入jQuery库。在HTML文件中，我们可以在`<head>`部分添加如下代码来引用jQuery 1.7.2的最小化版本： ```html ...
本教程将详细讲解如何使用jQuery实现一个简单的层（div）随滚动条移动的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
在网页设计中，实现“不...总之，"不随滚动条滚动广告代码"涉及了HTML5用于构建广告结构，CSS实现固定定位和样式设计，以及jQuery进行交互和动画处理。通过这些技术的结合，我们可以创建出既美观又实用的固定广告效果。
【标题】"qq客服随滚动条滚动"是一个关于网页设计和JavaScript实现的专题，主要涉及到的是如何让网页上的QQ客服窗口随着用户滚动页面而始终保持在视野范围内。这通常是为了提供更好的用户体验，确保用户在浏览网站时...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop-2);...复制代码代码如下: <div> ”con_tbl”> ”fixedHead”> 标题不动</th> </tr> ”code”> <t