利用js实现图片固定在屏幕的某个位置！

什么是图片固定？

在网页设计中，图片固定指的是当用户滚动页面时，某个图片可以固定在屏幕的某个位置不动。这种效果可以让网页看上去更加生动，同时也可以提高网页的用户体验。

实现图片固定的方法

实现图片固定有多种方法，最简单的方法是使用CSS中的position: fixed属性。但是，如果想要实现更加高级的效果，可以使用JavaScript。

利用JavaScript实现图片固定

步骤一：获取要固定的图片

首先，需要获取要固定的图片。可以使用getElementById方法获取图片元素：

var img = document.getElementById("fixed-image");

其中"fixed-image"是图片的id。

步骤二：计算图片的位置

接下来，需要计算图片应该固定在屏幕的哪个位置。可以使用getBoundingClientRect方法获取图片的位置信息：

var rect = img.getBoundingClientRect();

该方法返回一个对象，该对象包含图片上、下、左、右四个方向边界的位置信息。

然后，可以使用window.pageYOffset获取当前页面的垂直偏移量，即滚动条滚动的距离：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

如果当前页面滚动了20px，scrollTop的值则为20。

现在可以计算图片应该固定的位置了：

var top = rect.top + scrollTop;

其中，rect.top是图片元素距离页面顶部的距离，scrollTop是滚动条滚动的距离。将它们相加即可得到图片应该固定的位置。

步骤三：监听页面的滚动事件

接下来，需要监听页面的滚动事件，并在滚动时重新计算图片的位置。可以使用window.addEventListener方法添加滚动事件：

window.addEventListener("scroll", function() {

  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var top = rect.top + scrollTop;
  img.style.top = top + "px";
});

在滚动事件中，先重新计算图片的位置，然后设置图片的top属性为计算出的位置即可。这样，图片就会在页面滚动时固定在屏幕的某个位置。

完整代码

var img = document.getElementById("fixed-image");

var rect = img.getBoundingClientRect();
window.addEventListener("scroll", function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var top = rect.top + scrollTop;
  img.style.top = top + "px";
});

注意：如果要固定的图片在一个容器中，需要计算容器的位置，而不是图片的位置。

总结

利用JavaScript实现图片固定的过程并不复杂，只需要获取图片的位置信息，然后在页面滚动时重新计算图片的位置即可。这种效果可以提高网页的用户体验，让网页看上去更加生动。