如何在特定div上使用scrollr（jquery插件）来实现视差效果

Question

您好我使用 Alexander Prinzhorn 制作的Scrollr jquery插件来制作视差效果。我在全屏幕上发生了视差效果，但是当我希望它发生在特定的div上时，它不起作用。原始教程由Petr Tichy完成。我希望你能在这里帮助我。

这是代码

css文件

.con{
        width: 500px;

        height: 500px;
        overflow: auto;
        margin: 40px; background-color: #b3b3b3;
    }
    body{
        padding: 0;
        margin: 0;
        background-color: #a3a3a3;
    }
    section{
        height: 400px;

    }

    #slide-1 .bcg{
        display: block;

    }

    #slide-2 .bcg{
        display: block;

    }

    .bcg{

        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        height: 500px;
        width: 500px;
    }

这些是我收录的脚本文件。

<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>

     //initialize the scrollr function 
    $(document).ready( function(){
        var s = skrollr.init({
            forceHeight: false });
    });
</script>

html文件

<div class="con">
    <section id="slide-1">

        <div class="bcg" style="background-image: url('img1.jpg')"
             data-center-top="background-position: 50% 0px;"
             data-top-bottom="background-position: 50% -100px;"
             data-anchor-target="#slide-1"
             data-emit-events>
        </div>

    </section>
    <section id="slide-2">

        <div class="bcg" style="background-image: url('img2.jpg')"
             data-center="background-position: 50% 0px;"
             data-top-bottom="background-position: 50% -100px;"
             data-bottom-top="background-position: 50% 100px;"
             data-anchor-target="#slide-2"
             data-emit-events>

        </div>

    </section>


</div>