[分享]css不随浏览器滚动

在Web开发中，有时我们需要实现一个固定不动的元素，无论用户如何滚动页面，它都不会发生位置的变化。这可以通过CSS中的:fixed来解决。但是，如果用户在不同的浏览器中打开页面，我们会发现元素的位置并...

在Web开发中，有时我们需要实现一个固定不动的元素，无论用户如何滚动页面，它都不会发生位置的变化。这可以通过CSS中的position:fixed来解决。但是，如果用户在不同的浏览器中打开页面，我们会发现元素的位置并不一致。这是因为不同浏览器的滚动机制不同，导致元素相对于页面的位置也不同。

//html
<div id="fixed">
  //固定不动的元素内容
</div>

//css
#fixed{
  position: fixed;
  top: 0;
  left: 0;
} 

为了解决这个问题，我们可以使用JavaScript来动态改变元素的位置。首先，我们需要获取元素相对于文档的位置，其中包括横向和纵向的偏移量。接着，我们监听浏览器的滚动事件，通过改变元素的top和left属性值，将其固定在原位。代码如下：

//html
<div id="fixed">
  //固定不动的元素内容
</div>

//css
#fixed{
  position: absolute;
  top: 0;
  left: 0;
}

//js
let fixedEl = document.getElementById("fixed");
let fixedElOffsetTop = fixedEl.offsetTop;
let fixedElOffsetLeft = fixedEl.offsetLeft;

window.addEventListener("scroll", function(){
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  fixedEl.style.top = (fixedElOffsetTop - scrollTop) + "px";
  fixedEl.style.left = fixedElOffsetLeft + "px";
}); 

以上代码中，我们通过获取fixed元素相对于文档的偏移量，将其初始位置定位为absolute，并定义top和left属性，以便在滚动事件发生时能够作为基准。然后，我们监听浏览器的scroll事件，获取当前滚动的距离，在改变fixed元素的top和left属性时，通过计算与滚动距离的偏移量，从而在不同浏览器中实现固定不动的效果。