我的标志和背景是移动的，我应用的位置:固定和相对的，但仍然是移动的?我该怎么办?css和html? &

Question

我有一个视差SVG背景，当你滚动和一个徽标在导航栏移动。SVG和logo都有<img src="">标记。当我对SVG应用JavaScript时，它会移动SVG图像和徽标。我该怎么办?

const handleScroll = (event) => {
const scrollPosition = event.target.scrollingElement.scrollTop;

console.log("handleScroll");

const images = document.querySelectorAll("img"); 

console.log("images", images);

images.forEach((element) => {
element.style.transform = `translate(0, ${scrollPosition / 10}px)`;
});
};

window.addEventListener("scroll", handleScroll);
//sidebar
const toggleSidebar = () => document.body.classList.toggle("open");

我只想移动我的背景SVG。

Answer 1

主要问题是handleScroll函数中的一个错字，其中const和type关键字被错误地组合成typconst。此外，在代码末尾有一个额外的e，这似乎是一个打字错误。

我已经纠正了这些错误，并验证了代码现在应该像预期的那样工作。

const handleScroll = (event) => {
const scrollPosition = event.target.scrollingElement.scrollTop;
console.log("handleScroll");
const images = document.querySelectorAll("img");
console.log("images", images);
images.forEach((element) => {
element.style.transform = `translate(0, ${scrollPosition / 10}px)`;
});
};
window.addEventListener("scroll", handleScroll);
//sidebar
const toggleSidebar = () => document.body.classList.toggle("open");

Answer 2

这是因为您使用querySelectorAll访问您的后台。querySelectorAll将返回一个数组，其中包括您的DOM中的所有标签，这些标签由名称'img'进行mached，您的事件将适用于所有这些标签。

如果你想在一个特殊元素上应用一个事件，最好使用getElementById，并在你的HTML背景图像元素上使用Id属性。这样的:

const bgImage = document.getElementById("bg"); 
bgImage .style.transform = `translate(0, ${scrollPosition / 10}px)`;