ScrollMagic setPin 和媒体查询不能一起工作答案

【问题标题】：ScrollMagic setPin and media queries not working togetherScrollMagic setPin 和媒体查询不能一起工作
【发布时间】：2018-01-16 05:25:53
【问题描述】：

我在让我的 ScrollMagic 项目使用媒体查询时遇到困难。当我从场景中删除 .setPin 时，查询可以完美运行，并且我的元素恰好位于应有的位置。但是，当我重新打开它时，html 将不遵守规定的媒体查询规则。它只会记住页面呈现时存在的原始“左”属性。

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);

任何建议将不胜感激。

【问题讨论】：

标签： javascript scrollmagic

【解决方案1】：

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

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

我基本上添加了位置：sticky;为了混合，我将方法从使用左侧和顶部定位更改为使用填充将我的元素定位在全宽容器中。

.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;
    }

}

【讨论】：