CSS实现背景图片固定滚动形成视觉差效果

最近在写项目的时候遇到一个页面效果：背景图片固定，但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动，查阅了相关资料，做记录如下：
只要固定的元素的背景background-size值设置为cover，background-attachment的值设置为fixed，这样就实现了单页面的背景固定和滚动效果。
HTML代码：

<div class="testBefore"><h1>BEFOREh1>div>
<div class="fixedBg">div>
<div class="testAfter"><h1>AFTERh1>div>

CSS代码：

<style> 
        body,html{ height: 100%; }
        *{ margin: 0; padding: 0; }
        .fixedBg{ 
            min-height: 500px;
            background-image: url("bg.jpg"); 
            background-position: center center; 
            background-repeat: no-repeat; 
            background-attachment: fixed;
            background-size: cover; 
        }
        .testBefore,.testAfter{
            background: #333;
            width: 100%;
            height: 300px;
            text-align: center;
        }
        h1{
            color: #fff;
            font-size: 100px;
            line-height: 300px;
        }
style>