使用JS旋转图像时如何添加边距顶部答案

【问题标题】：How to add a margin top when image is rotating with JS使用JS旋转图像时如何添加边距顶部
【发布时间】：2021-06-26 13:11:01
【问题描述】：

我想在图像旋转 90 度时为其顶部添加边距。这就是我旋转图像的方式：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => {
  if(!window.scrollY) {
    img.style.transform = "rotate(0deg)"
  } else {
    img.style.transform = "rotate(-90deg)"
  }
})

我知道这可能很简单，但我是初学者。所以希望有人能告诉我如何做到这一点。谢谢！

【问题讨论】：

试试这个：img.style.marginTop = "40px";
@ManasKhandelwal 是的，但是如何在现有代码中正确地实现它？
你能把 HTML/CSS 也分享给我，以便我能正确地展示给你
@ManasKhandelwal 我是通过 elementor 制作的，所以代码真的很垃圾。你不能告诉我如何把它放在现有的 javascript 代码中吗？
所以你想要滚动或正常的边距！

标签： javascript jquery css function margin

【解决方案1】：

试试这个：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => {
  if(!window.scrollY) {
    img.style.transform = "rotate(0deg)"
    img.style.marginTop = "0px"; // This can also be 0 or "0".
  } else {
    img.style.transform = "rotate(-90deg)"
    img.style.marginTop = "60px";
  }
})

【讨论】：

效果很好，谢谢玛纳斯！但现在的问题是，如果我滚动回顶部，徽标会停留在此边距（60 像素）并且不会回到起始位置？
@leon_505 你需要添加 img.style.marginTop = "0";到第一个 IF 块。
@leon_505 只是一个有用的说明，当您在 css 中的值为 0 时，您可以用单位表示它，也可以不用单位表示。所以 0px 和 0 的处理方式是一样的。
@leon_505 我知道，只是不想混淆 OP 所以我做了"0px"
@ManasKhandelwal 我认为 =) 不用担心！他可能很快就会遇到这种情况，所以我想提一下。