【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固定在屏幕的一个位置,不随滚动条的拖动而改变位置
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
div跟随固定在浏览器左边,上下拉动浏览器滚动条时div固定在左边,横向拉动滚动条时DIV会跟随主体而改变位置。
复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}
样式: 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop-2);...复制代码代码如下: <div> ”con_tbl”> ”fixedHead”> 标题不动</th> </tr> ”code”> <t
而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...
HTML5_html表头固定不滚动而内容滚动的效果,表格是基于Div CSS实现的,将表头固定住不滚动,而表格里面的每行数据随滚动条滚动。在显示较多数据时,当用户滚动鼠标中轮时,表格内容会滚动,而表头固定不变,可以将...
CSS固定DIV,不会随滚动条走动
项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...
控制DIV永远固定在页面底部的方法有很多,基本上都是通过css或js来实现的,本节也实现了一个这样的效果,大家可以学习下
本篇文章主要介绍了解决Vue固定滚动位置的处理办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动...
lhgdialog超强弹窗控件,支持遮罩,缩放、拖动,随滚动条滚动,丰富接口调用 可以外调页面,也可以显示html内容 我自己扩展如下: http://www.px915.com/lhgdialog/_demo.html 1、改变了弹窗的样式(自认为喜欢...
有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute)。本文提供一个解决方法,附jquery扩展源码。 本文的实现方式是使用js来控制div块随滚动条水平...
jquery漂浮客服代码,支持左右漂浮. 可随滚动条上下移动。目前还没发现不兼容的浏览器。
用css实现div固定在屏幕底部,不随垂直滚动条接动而闪动,很好的实现在ie下的浮动效果,IE6 position:fixed
如果你对CSS定位还不够了解 可以接着往下看,运行里面... 2、在身的左右分别放置两个垂直居中的div,类似浮动广告条,位置固定,不随滚动条的滚动和滚动; 【问题】: 1、如何固定层? 复制代码代码如下:/* 全局浮动层