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随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...
4. **防止浮动**:在描述中提到"上下不浮动",这可能是指`div`在垂直方向上保持固定,不随页面内容浮动。我们已经在`position: fixed`下实现了这一点,因为固定定位的元素不会受其他浮动元素的影响。 综上所述,要...
总结来说,要创建一个不随滚动条滚动而始终保持在页面底部的div元素,我们使用了CSS的position属性,并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置,同时设置width和...
本教程将详细讲解如何使用jQuery实现一个简单的层(div)随滚动条移动的效果。 首先,我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
标题中的“jquery右侧浮动广告,随滚动条上下滚动”指的是使用jQuery库实现的一种网页广告设计技术,这种技术可以使广告在页面右侧保持固定位置,并随着用户滚动页面时始终保持可见。这样的设计能够持续吸引用户的...
1. **CSS布局**:首先,我们需要为包含内容的div设置一个固定的高度和宽度,同时将overflow属性设置为auto或scroll,这将开启div的滚动条功能。例如: ```css .scrollDiv { width: 300px; height: 200px; ...
浏览器的滚动位置恢复行为可以分为两个步骤:在hashchange事件触发时,浏览器会拿到当前页面的document.body.scrollTop值,并与自己存储的滚动条位置进行比较,取最小的值,设置成当前的document.body.scrollTop值。...
- 页面结构简单,包含一个主容器`<div>`,该容器内有一个固定位置的子`<div>`用于模拟滚动条。 - 滚动条由三个子元素组成:`test_scroll_up`(上箭头)、`test_scroll_bar`(滚动条滑块)、`test_scroll_down`(下...
3. **页面滚动**: 当用户在网页上滚动鼠标滚轮或触摸屏滑动时,页面内容会随之上下移动。 4. **固定定位**: 在CSS中,通过设置`position: fixed;`可以使元素相对于浏览器窗口保持固定位置,即使页面滚动也不会改变...
项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...
这种类型的广告会在用户浏览页面时,随着滚动条一起上下移动,始终保持在用户的视野范围内,以提高广告的可见性和点击率。本压缩包提供的“可关闭对联广告代码”正是实现这种效果的一种源码示例。 浮动广告的技术...
4. **固定定位**:相对于浏览器窗口进行偏移,不随滚动条移动而改变位置。 #### 二、div标签与CSS定位 div标签是一种常见的HTML容器元素,常用于组合文档中的部分结构,并可通过CSS进行样式化处理。接下来详细介绍...
这段代码会让div有一个固定宽度和高度,并在内容超出时显示滚动条。 接下来,我们关注CSS的`::-webkit-scrollbar`伪元素,这是Webkit内核浏览器(如Chrome和Safari)特有的,可以用来定制滚动条的样式。例如,我们...
在网页设计中,实现腾讯QQ网页在线客服那种随滚动条上下移动的效果,是一种常见的交互设计手法,它能够确保用户在浏览页面时始终保持客服窗口在视线范围内,方便用户随时咨询。这种效果通过JavaScript、CSS和HTML三...
标题中的“图片内容拖动查看、不需要使用滚动条进行滚动查看”是指在网页中实现一种交互功能,允许用户通过拖动来查看长图或者大量内容,而不是依赖传统的滚动条进行上下滚动。这种功能常见于地图应用、长图浏览或者...
`来模拟类似效果,通过动态改变背景位置,使背景看起来像是固定不动的。但这种方法更复杂,需要计算滚动条的位置,并可能涉及JavaScript的使用。 标签中提到的“源码”意味着可能需要查看实际的代码示例来理解这个...
- **容器`#demo`**:作为外部容器,设置为固定高度(200px)和宽度(600px),并隐藏溢出内容,以实现滚动效果。 - **内容区域`#demo1`**:包含实际要滚动的内容。 - **副本区域`#demo2`**:复制`#demo1`的内容,...
当滚动条位置超过菜单的初始位置时,将菜单的`position`更改为`absolute`,并根据滚动的距离调整其`top`值。否则,将其恢复为固定位置。 通过结合HTML、CSS和jQuery,我们就实现了左侧浮动且跟随鼠标上下滚动的菜单...
这些样式将使`<div>`具有垂直滚动条,并设置了一个固定的高度,当内容超出这个高度时,用户可以通过滚动条查看剩余内容。 6. **添加内容**:回到设计视图,双击`<div>`,在其中添加需要显示的文本、图像或其他HTML...