jquery - 背景图像播放 - 导致页面移回顶部

Question

关于 a website I have made

我有一个 <header>和一个 <section>在我的 HTML 文档中。

页眉中有一个褪色的背景图片，如果您在页面的下方，即在部分部分，正在加载新图片时发生的情况是，该网站直接跳回顶部。

有什么办法可以解决这个问题吗？

我已经尝试了一些 CSS 修复等，但没有成功。

jQuery :

    var counter = 0;

// Playthrough Background Images
    var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
    ]
    var nextBG = "url(" + imgArray[counter] + ")";

    $('.home-page').css("background-image", nextBG);

    setInterval(function(){
        counter++;
        nextBG = "url(" + imgArray[counter % imgArray.length] + ")";
        $('.home-page').fadeOut('fast', function() {
            $(this).css("background-image", nextBG).fadeIn('fast'); })
    }, 4000); // 4 second interval

CSS

#header {
    overflow:hidden;
    height:auto;
    background-position: center center;
    background-repeat: no-repeat;
    height:100%;
    position: relative;
}
.no-touch #header {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

谢谢

编辑 我会添加一个 jsFiddle，但是该站点是在 PyroCMS 中构建的，需要一段时间才能拼凑起来。

Answer 1

如下使用 zindex css 属性

.no-touch #header {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    zindex:1000; or zindex:-1000;
}

哪个更合适