Question

我在使用媒体查询时让ScrollMagic项目表现得很困难。当我从场景中删除.setPin时，查询工作完美，我的元素恰好位于应有的位置。但是，当我重新打开它时，html将不会遵循所述的媒体查询规则。它只会记住页面渲染时存在的ORIGINAL“left”属性。

HTML看起来像这样：

<section class="container-fluid purple" id="scene02">
    <img src="img/contact-us-btn.png" class="yellow-btn" data-section="#scene07">
    <div class="container scene">
        <ul class="tabs activetabs">
            <li class="active"><img src="img/icons/section-02-1.png">
                <p>Security</p>
            </li>
            <li><img src="img/icons/section-02-2.png">
                <p>Collaboration</p>
            </li>
            <li><img src="img/icons/section-02-3.png">
                <p>Connectivity</p>
            </li>
        </ul>
    </div>
</section>

scrollmagic JS看起来像这样：

// -------------------
// SCENE 02
// -------------------
var scene02_TL = new TimelineLite();
scene02_TL.to("#scene02 .tabs img", 1, {scale:0.6, ease: Linear.easeNone});
scene02_TL.to("#scene02 .tabs p", 1, {scale:1.4, ease: Linear.easeNone});
// build scene
scene_02_main = new ScrollMagic.Scene({triggerElement: "#scene02", duration: 560,offset:800})
                .setTween(scene02_TL)
                .setPin("#scene02 .tabs")
                .addIndicators({name: "02_1 (duration: 560)"}) // add indicators (requires plugin)
                .addTo(controller);

最后，输出css的LESS看起来像这样：

.tabs {
    z-index: 17;

    @media screen and (min-width:1200px) {
        .setPosition(@scene-02-starty, 220px, 722px);
        .setDimensions(900px, auto);
    }
    @media screen and (min-width:993px) and (max-width:1199px) {
        .setPosition(@scene-02-starty, 200px, 722px);
        .setDimensions(770px, auto);
    }
    @media screen and (max-width:992px) {
        .setPosition(@scene-02-starty, 40px , 722px);
        .setDimensions(676px, auto);
    }

}

正如你所看到的，我甚至对断点进行了硬编码并检查了检查员，他们都在正确的位置开火。我也尝试了各种形式的重置和刷新..

scene_02_main.refresh();
controller.updateScene([scene_02_main]);
controller.update(true);

非常感谢任何建议。

Answer 1

这个帖子中评价最高的答案帮助我解决了这个问题：

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

我基本上添加了位置：粘性;混合我改变了我的方法，从使用左侧和顶部定位到使用填充将我的元素放置在一个全宽度容器中。

.tabs {
    z-index: 17;
    .setDimensions(100%, auto);
    left: 0 !important;
    right:  0 !important;
    transform: translate3d(0px,722px,0px);
    position: -webkit-sticky;
    position: sticky;

    @media screen and (min-width:1200px) {
        padding:0 80px 0 257px;
    }
    @media screen and (min-width:993px) and (max-width:1199px) {
            padding: 0 6px 0 207px;
    }
    @media screen and (max-width:992px) {
            padding: 0 20px;
    }

}

ScrollMagic setPin和媒体查询无法一起使用

1 个答案: