我有以下代码：
document.addEventListener('scroll', (event) => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
let topValue = scrollY*0.5;
e.style.top = `${topValue}px`;
});
当我尝试滚动时，背景像疯了似的摇摇晃晃。我在互联网上看过，似乎没有答案。我认为它可以做些事情，但是计算起来确实很慢，我走对了路，在那种情况下，我该如何解决呢？
答案 0 :(得分：0)
Javascript不是这样做的正确方法。您应该改用CSS：
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
答案 1 :(得分：0)
如果您希望.bg-top背景元素不随窗口滚动，则应改用css属性position: fixed。
运行下面的代码段以查看其工作方式：
html, body {margin: 0; padding: 0; width: 100%; height: 100%;}
.bg-img{
background: url("//picsum.photos/200/100");height: 100px;width: 100%;
position:fixed;
top:0;
}<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>
但是，如果出于任何原因必须使用JavaScript，则可以更改滚动上的position属性值，并将top属性分配给0。
运行下面的代码段以查看其工作方式：
document.addEventListener('scroll', () => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
e.style.position = "fixed";
e.style.top = "0";
});html, body {padding: 0; width: 100%; margin: 0px 0px 0px 0px; height: 100%;}
.bg-img{background:url("//picsum.photos/200/100");height: 100px; width: 100%;}<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>