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

Posted 2023-04-17

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

可以把该元素的定位设置为fixed,该元素就会始终在那个位置，不过要注意IE6下不支持固定定位，兼容IE6可以通过JS实现,不过JS实现的是滑动效果，要想在IE6下也实现固定定位那样的效果没办法做到。 参考技术A CSS中有个position为fixed时，元素就会固定住。
如果你要用JS表示，
原生JS： document.getElementById('id').style.position = 'fixed';
jQuery：$('selector').css('position', 'fixed');本回答被提问者采纳

定位与锚点

• 文档流：

普通流：上至下，左至右
浮动流：元素添加了float：；
定位流：添加了定位属性

• 定位 position:;

static 默认值
absolute 绝对定位(脱离文档流，不占位；默认参考浏览器零点)
relative 相对定位（占据文档流，占位置；参考自身加载在页面中的位置）
fixed 固定（脱离文档流，不占位；元素固定在页面中，不随页面滚动而滚动；默认参考浏览器零点）
sticky 粘性定位（页面达到一定高度时，脱离文档流；效果是吸附浏览器顶部）（结合了relative和fixed的特征）

坐标位置 水平 left right
垂直 top bottom

• 包含块：

形成嵌套结构，且父级元素有设置定位position：relative；

 

• absolut和relative的区别：

1、是否占据文档流， absolute占据，relative不占据
2、参考物不同，absolute参考html，relative参考自身

• 层级关系 z-index:;

前提条件：有定位的元素才能设置层级关系
auto 默认值0
number 具体数字，可以为负数
并列关系：改变任一元素的层级关系都可以
嵌套关系：只能改变子集的层级关系

• 元素居中方式

第一种：

position:absolute; ==>子元素改变子集位置
top:0p;
right:0px;
bottom:0px;
left:0px;
margin:auto; ==>自适应

第二种：

position:absolute; ==>子集作为被参考物
top:50%;
left:50%;
margin-left:宽度值一半的px;
margin-top:高度值一半的px;

• 锚点链接

1、点击位置 <a href=#name"">点击位置</a>
2、确定跳转位置 <标签 id="name">指定跳转的位置</标签>
3、页面高度足够