background-attachment: fixed适用于桌面Firefox，Android Firefox和桌面Chrome，但在Android Chrome上失败。
在Stackoverflow的其他地方已经报告了这个问题的变化，但是我的例子与其他的有些不同，其他的通常是针对整个视口的背景图像，而我的显示为在div后面观看的固定背景。用户滚过它。
经过测试的设备：Windows 8.1 Chrome桌面：版本73.0.3683.86（官方版本）（64位）
Android 4.4.4; XT1080 Build / SU6-7.7 Chrome 73.0.3683.90
我用这个CodePen构建了一个简单的例子：
https://codepen.io/bmt-codepen/pen/drxbpN
但代码很简单：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fixed Problem</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- https://codepen.io/bmt-codepen/pen/drxbpN -->
<style>
body {
margin: 0;
padding: 1em;
}
.fixed {
height: 100%;
position: relative;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 100%;
padding: 1em;
color: white;
}
.image1 {
background-image: url('https://images.unsplash.com/photo-1515694346937-94d85e41e6f0');
}
.image2 {
background-image: url('https://images.unsplash.com/photo-1534274988757-a28bf1a57c17');
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
<p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
<p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
</div>
<div class="fixed image1">
<h1>The background fails to remain fixed on Chrome for Android</h1>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
<p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
<p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
</div>
<div class="fixed image2">
<h1>The background fails to remain fixed on Chrome for Android</h1>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
<p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
<p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
</div>
</body>
</html>
有没有人知道解决这个特定例子的样式的解决方案或解决方法？
这应该适合你。在某些设备上遇到这是一个常见问题。希望有所帮助。
.fixed {
background-image: url('https://images.unsplash.com/photo-1515694346937-94d85e41e6f0');
background-attachment:scroll;
background-position:left bottom;
background-size:cover;
}
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.fixed').css('background-position', 'left ' + -((scrolledY)) + 'px');
});