代码示例:(标识:jsck_style_backgroundattachment_2)
<!DOCTYPE html>
<html>

<body style="background: #f3f3f3 url('/static/demo/images/tree.png') no-repeat fixed right top;">

<h1>HTML Style 对象</h1>

<h2>backgroundAttachment 属性</h2>

<p><b>提示:</b>如果滚动条不可用,请尝试调整窗口大小。</p>
<p>单击该按钮可在滚动和固定位置之间切换。</p>
<p><b>提示:</b>请在单击按钮之前和之后滚动页面。</p>

<button id="toggle" onclick="myFunction();">将图像设置为滚动</button>
 
<p>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
一些启用滚动的文本。
<br><br><br><br>
</p>

<script>
function myFunction() {
  let x = document.body.style.backgroundAttachment;
  document.getElementById("toggle").innerHTML=(x=="scroll")? "将背景图像设置为滚动!":"将背景图像设置为固定!";
  document.body.style.backgroundAttachment=(x=="scroll")? "fixed":"scroll";
}
</script>

</body>
</html>
运行结果: