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

固定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随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

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

    4. **防止浮动**:在描述中提到"上下不浮动",这可能是指`div`在垂直方向上保持固定,不随页面内容浮动。我们已经在`position: fixed`下实现了这一点,因为固定定位的元素不会受其他浮动元素的影响。 综上所述,要...

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

    总结来说,要创建一个不随滚动条滚动而始终保持在页面底部的div元素,我们使用了CSS的position属性,并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置,同时设置width和...

    简易的jquery层随滚动条移动

    本教程将详细讲解如何使用jQuery实现一个简单的层(div)随滚动条移动的效果。 首先,我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.

    标题中的“jquery右侧浮动广告,随滚动条上下滚动”指的是使用jQuery库实现的一种网页广告设计技术,这种技术可以使广告在页面右侧保持固定位置,并随着用户滚动页面时始终保持可见。这样的设计能够持续吸引用户的...

    js 实现div里面的内容滚动,并可以通过按钮控制

    1. **CSS布局**:首先,我们需要为包含内容的div设置一个固定的高度和宽度,同时将overflow属性设置为auto或scroll,这将开启div的滚动条功能。例如: ```css .scrollDiv { width: 300px; height: 200px; ...

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

    浏览器的滚动位置恢复行为可以分为两个步骤:在hashchange事件触发时,浏览器会拿到当前页面的document.body.scrollTop值,并与自己存储的滚动条位置进行比较,取最小的值,设置成当前的document.body.scrollTop值。...

    自定义滚动条

    - 页面结构简单,包含一个主容器`<div>`,该容器内有一个固定位置的子`<div>`用于模拟滚动条。 - 滚动条由三个子元素组成:`test_scroll_up`(上箭头)、`test_scroll_bar`(滚动条滑块)、`test_scroll_down`(下...

    6种效果jquery页面滚动div层固定插件hcsticky

    3. **页面滚动**: 当用户在网页上滚动鼠标滚轮或触摸屏滑动时,页面内容会随之上下移动。 4. **固定定位**: 在CSS中,通过设置`position: fixed;`可以使元素相对于浏览器窗口保持固定位置,即使页面滚动也不会改变...

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

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

    浮动广告,跟随滚动条移动的源码

    这种类型的广告会在用户浏览页面时,随着滚动条一起上下移动,始终保持在用户的视野范围内,以提高广告的可见性和点击率。本压缩包提供的“可关闭对联广告代码”正是实现这种效果的一种源码示例。 浮动广告的技术...

    CSS单元的位置和层次-div标签

    4. **固定定位**:相对于浏览器窗口进行偏移,不随滚动条移动而改变位置。 #### 二、div标签与CSS定位 div标签是一种常见的HTML容器元素,常用于组合文档中的部分结构,并可通过CSS进行样式化处理。接下来详细介绍...

    CSS动态滚动

    这段代码会让div有一个固定宽度和高度,并在内容超出时显示滚动条。 接下来,我们关注CSS的`::-webkit-scrollbar`伪元素,这是Webkit内核浏览器(如Chrome和Safari)特有的,可以用来定制滚动条的样式。例如,我们...

    腾讯QQ网页在线客服,随网页滚动条上下移动的效果一

    在网页设计中,实现腾讯QQ网页在线客服那种随滚动条上下移动的效果,是一种常见的交互设计手法,它能够确保用户在浏览页面时始终保持客服窗口在视线范围内,方便用户随时咨询。这种效果通过JavaScript、CSS和HTML三...

    图片内容拖动查看、不需要使用滚动条进行滚动查看

    标题中的“图片内容拖动查看、不需要使用滚动条进行滚动查看”是指在网页中实现一种交互功能,允许用户通过拖动来查看长图或者大量内容,而不是依赖传统的滚动条进行上下滚动。这种功能常见于地图应用、长图浏览或者...

    HTML 页面滚动时背景图片不会移动

    `来模拟类似效果,通过动态改变背景位置,使背景看起来像是固定不动的。但这种方法更复杂,需要计算滚动条的位置,并可能涉及JavaScript的使用。 标签中提到的“源码”意味着可能需要查看实际的代码示例来理解这个...

    js 无缝滚动,鼠标放上去暂停代码

    - **容器`#demo`**:作为外部容器,设置为固定高度(200px)和宽度(600px),并隐藏溢出内容,以实现滚动效果。 - **内容区域`#demo1`**:包含实际要滚动的内容。 - **副本区域`#demo2`**:复制`#demo1`的内容,...

    jQuery左侧浮动跟随鼠标上下滚动菜单代码

    当滚动条位置超过菜单的初始位置时,将菜单的`position`更改为`absolute`,并根据滚动的距离调整其`top`值。否则,将其恢复为固定位置。 通过结合HTML、CSS和jQuery,我们就实现了左侧浮动且跟随鼠标上下滚动的菜单...

    dreaweaver 插入一个可以上下滚动区域

    这些样式将使`<div>`具有垂直滚动条,并设置了一个固定的高度,当内容超出这个高度时,用户可以通过滚动条查看剩余内容。 6. **添加内容**:回到设计视图,双击`<div>`,在其中添加需要显示的文本、图像或其他HTML...

Global site tag (gtag.js) - Google Analytics