`
天之痕苏
  • 浏览: 17733 次
文章分类
社区版块
存档分类
最新评论

固定div位置,不随滚动条上下动

 
阅读更多

1、position

div中的style属性中的一个关键字,表明了该div所在的位置以及位置本身的属性。

position有四个值可选:static,absolute,fixed,relative。

若要使得div相对于浏览器窗口固定,即不随滚动条的变化而上下移动,可以用fixed属性。最近比较忙,抽不出时间来具体的写详细用法,具体的用法见:http://blog.csdn.net/marty_zhu/article/details/1910597

还有一点要指出的是:我用bootstrap3开发的界面,本来一行分为12个栅格,但是如果使用了fixed属性,会破坏bootstrap3中设定的栅格的格式,所以,为了在界面上达到想要的效果,就要结合js去设置div的高度、宽度、内边距padding、外边距margin等。

2、js获得当前窗口的高度和宽度

高度可以用$(window).height()获得,宽度可以用$(window).width()获得。这里的高度、宽度指的是当前浏览器窗口的大小。

对于获得div的高度和宽度,用

var height = document.getElementById("divId").offsetHeight;
var width = document.getElementById("divId").offsetWidth;
设置div的高度:
document.getElementById("divId").height = height;
document.getElementById("divId").width = width;

3、div置于最前面,即div之间的覆盖问题

style属性中有一个"z-index"关键字,可以设定多个div之间的覆盖关系。数值越大,表示越在上层。

可参考:http://blog.sina.com.cn/s/blog_5bd6b45101014h2i.html

4、div的透明设置

还是style属性中的"opacity"关键字。范围从0~1。0表示全透明,1表示不透明。

分享到:
评论

相关推荐

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动

    div跟随固定在浏览器左边,上下拉动浏览器滚动条时div固定在左边,横向拉动滚动条时DIV会跟随主体而改变位置。

    css将div层固定显示在页面底部不随滚动条滚动

    复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}

    基于JavaScript实现div层跟随滚动条滑动

    项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...

    解决Vue页面固定滚动位置的处理办法

    本篇文章主要介绍了解决Vue固定滚动位置的处理办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jquery滑动固定

    jquery滑动固定特效,可以在一个div内固定上下,不超出访问,滚动条拖动

    jquery漂浮客服代码,支持左右漂浮

    jquery漂浮客服代码,支持左右漂浮. 可随滚动条上下移动。目前还没发现不兼容的浏览器。

    html中table固定头部表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class=table_box_big> <div class=table_box> <th><div>标题一</div> <th><div>标题二</div>...

    利用10行js代码实现上下滚动公告效果

    第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告 第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告 第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告 第4条公告第4条公告第4条公告第4...

    vote.zip for volunteer day

    header与footer固定在网页上下端,一直显示中间的div content区域随鼠标滚动,我设置了autoflow:auto,其它地方都满意了,就是div上会有个滚动条

    保持固定表头和表体宽度一致,dom中js的妙用.docx

    但是,当内容较多时,下表所在的div出现垂直滚动条,使下表的宽度变小,而上表的宽度不变,从而上下表的单元格出现错位,不好看了。 怎么解决呢? 你可能想到了使用表大小改变事件、或者表内容改变事件。但是,...

    html css将表头固定的最直接的方法

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路。但是与此同时必须解决两个问题。第一:表体将随之不依据表头...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    IE6特有bug兼容性问题整理

    结果IE6下,背景不固定了,只看到背景图片随着滚动条上下移动而移动。演示页面 要解决这个问题呢,也是有办法的,就是将fixed属性转移到html标签上就可以了。即: html{background:white url(../image/404.png) no-...

    精易模块---用于网页操作及其它功能的易语言模块

    滚动条固定 说明:控制浏览器滚动条上下滑动 滚动条控制 说明:控制浏览器滚动条上下滑动 滚动条取高宽 说明:取当前网页浏览器滚动条的高度和宽度 滚动条取位置 说明:取当前网页的滚动条横纵向位置 就绪判断_...

    BootStrap实用代码片段之一

    应用场景:经典上下布局中,顶部导航条固定,下部填充不显示滚动条 解决方案:导航条固定在顶部,同时为body设置内边距(padding-top),内边距为导航条高度(默认50px,可自己调整高度),html代码如下: <!--...

    JavaScript网页特效范例宝典源码

    实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...

    超实用的jQuery代码段

    5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...

Global site tag (gtag.js) - Google Analytics