0

我需要从几个元素中滚动。在这种情况下，这里从三张图片。

这样做没问题，但我试图实现的是，在我的滚动事件期间，bg 保持不变（或多或少固定），并且在滚动事件完成后，背景继续移动。

html:

<div id="infografik">
    <div id="innerWrapper">
        <div class="minerWrapper">
            <img class="miner1" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Girl_Miner.png" alt="girl miner" />
            <img class="miner2" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Head_Miner.png" alt="girl miner" />
            <img class="miner3" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Boy_Miner.png" alt="girl miner" />
        </div>
    </div>
</div>

CSS：

#infografik{
    font-size:100px;
    width:100%;
    background:url('../images/infografik/whole_bkgd_2.jpg')center center no-repeat;
    height:6200px;
    /*position:fixed;*/
}
#innerWrapper{
    width:935px;
    height:100%;
    margin:0 auto;
    background-color:red;
    opacity:0.3;
}
.minerWrapper{
    top:260px;
    position:relative;
}
#scrollwrapper{
    height:6200px;
    position:absolute;
    /*overflow:scroll;*/
}

jQuery：

controller.pin($('#infografik'), 700, {
    anim: (new TimelineLite())
        .append(
            TweenMax.fromTo($('img.startGM'), .45,
                {css:{width: 22}, immediateRender:true},
                {css:{width: 172}})
        ),
    onUnpin: function(){
        $('#infografik').css('position', 'relative');
    }
}, -2000);

我试图给 bg 第一个固定位置，但在滚动事件之后他跳回开始......

我还尝试使用 superscrollorama pin 功能为 minerWrapper 提供固定位置，但这只会导致矿工在活动期间静止不动，但背景会继续移动，我需要一切都静止并且滚动事件移动一些东西。

问候蒂米

我需要

4

2 回答 2

0

他们 Timotheus 我知道您只是从错误的方式处理此问题，图钉应将页面固定为您想要的任何内容，这样背景就不会改变。

我还要注意不要对 pin 进行任何位置更改，这只会在 DOM 中导致一些不可预测的事情。我建议您删除所有定位以开始。

据我所知，您正在尝试对 3 张图像进行一些动画处理，但我无法真正得到您想要做的事情。无论如何，您可以将其放入 JSFiddle 或其他东西中，以便我更好地查看？

于 2013-10-23T20:18:36.087 回答
0

我们可以通过在页面加载时自动向下滚动来修复它。

这是脚本：

function Scrolldown() {
     window.scroll(0,1); 
}

示例链接：

http://codepen.io/subin/pen/dprkkY

请让我们知道您的建议。

于 2016-09-15T05:04:31.147 回答