怎么用js固定某个元素，让它不随页面的滚动而滚动，始终固定在窗口的某个位置？

JavaScript029

怎么用js固定某个元素，让它不随页面的滚动而滚动，始终固定在窗口的某个位置？,第1张

可以把该元素的定位设置为fixed,该元素就会始终在那个位置，不过要注意IE6下不支持固定定位，兼容IE6可以通过JS实现,不过JS实现的是滑动效果，要想在IE6下也实现固定定位那样的效果没办法做到。

在 JS获取div高度的方法 中，整理了几个有关于获取div高度的方法，后来又遇到一个问题，怎么获取DIV在页面中的绝对位置，因此在这篇笔记中记录一下。

页面结构

样式

getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。

offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置，整型，单位像素。

借用这个思路，当我们想获取元素的绝对位置时，可以递归遍历，直到元素的父元素为body为止。

关于offsetParent属性，有以下几点Tips。

用途：滑动web页面

参数说明

x：屏幕向右移动的距离

y：屏幕向下移动的距离

用途：以下方法可以删除元素的任何属性，主要用来移除时间控件的readonly属性

参数说明

css:：css表达式

index：索引值，默认0，标识第一个元素

attribute：元素的某个属性，比如readonly，value，name等

用途：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

用途：由于web自动化的最大问题就是稳定性比较差，有些时候使用selenium无法点击元素，因此我们可以使用JS实现元素的点击操作

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

用途：用来清除输入框的内容

参数说明

css：css表达式

index：索引值，默认0，标识第一个元素

用途：输入框中输入内容

参数说明

css：css表达式

value：待输入的数据

index：索引值，默认0，标识第一个元素

以上所有的JS操作，还可以结合selenium中的WebElement按照以下方式实现，因为JS中查找元素的方法有限，比如xpath定位，在js中不存在

如滚动页面

参数说明

element：通过selenium中的定位方法查找到的WebElement元素对象

arguments[0]：代表execute_script（）方法的第二个参数

我们简单的写个测试脚本来测试一下以上JS脚本是否能够顺利执行

js_element.py

test_js.py