css实现组件停留不滚动

CSS实现组件停留不滚动

对于一些网站，我们经常能够看到页面上的某些组件会在滚动页面时保持不动，这样就能够方便用户对页面内容进行浏览。这种效果看起来很高级，但实现起来却非常简单，只需要使用CSS就可以完成。

常见实现方式

1.position: fixed;
这种方式将组件的定位方式设置为固定定位，即无论页面如何滚动，这个组件的位置总是固定的。这种解决方案代码简单，但也存在一些问题，特别是在移动端浏览器上会出现兼容性问题。

2.position: sticky;
这种方式将组件的定位方式设置为粘性定位，即当组件在整个页面中的位置超出了视口时，该组件将停止滚动，并保持在其原始位置。需要注意的是，该属性在一些浏览器如IE下并不支持。

3.JavaScript监听页面滚动事件进行DOM操作;
这种方式借助于JavaScript进行DOM操作，使得组件在滚动时自动的固定在页面某个位置上，其原理是通过监听页面的滚动事件来判断当前组件是否进入了指定的固定位置，从而使用样式进行位置的改变。

注意事项

1.滚动的父元素位置不能为static。

2.应该考虑到不同浏览器的兼容性问题，特别是在使用position: sticky时需要注意。

3.组件固定的位置要与页面设计相协调，否则会影响整体的效果。