Question

首先，这是我想要实现的目标：http://codepen.io/daveredfern/pen/JKpKjX

HTML

option:checked

CSS

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="section">
        <div class="section__img">
            <div class="section__img__inner" style=
            "background-image: url(http://media.idownloadblog.com/wp-content/uploads/2014/10/iPad-mini-3-silver-side-by-side.png);">
            </div>
        </div>
        <div class="section__body">
            <div class="section__text">
                <h2>Section title</h2>
                <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus,
                lacinia vel molestie et, lacinia non augue. Aenean quis iaculis
                velit. Sed aliquet semper metus quis egestas. Nullam lorem
                turpis, euismod nec feugiat at, venenatis quis odio. Aenean
                tellus libero, rutrum in mauris in, suscipit aliquam lacus.
                Proin ac viverra risus. Vivamus ullamcorper, massa id congue
                sagittis, erat ipsum aliquet tellus, nec sollicitudin erat
                risus vitae nisl.</p>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="section__img">
            <div class="section__img__inner" style=
            "background-image: url(http://wpuploads.appadvice.com/wp-content/uploads/2014/12/ipad-c4a63aad52bb1d69495bc2100e5f2026.png);">
            </div>
        </div>
        <div class="section__body">
            <div class="section__text">
                <h2>Section title</h2>
                <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus,
                lacinia vel molestie et, lacinia non augue. Aenean quis iaculis
                velit. Sed aliquet semper metus quis egestas. Nullam lorem
                turpis, euismod nec feugiat at, venenatis quis odio. Aenean
                tellus libero, rutrum in mauris in, suscipit aliquam lacus.
                Proin ac viverra risus. Vivamus ullamcorper, massa id congue
                sagittis, erat ipsum aliquet tellus, nec sollicitudin erat
                risus vitae nisl.</p>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="section__img">
            <div class="section__img__inner" style=
            "background-image: url(http://www.consult-pro.com/img/dental-videos-ipad-app.png);">
            </div>
        </div>
        <div class="section__body">
            <div class="section__text">
                <h2>Section title</h2>
                <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus,
                lacinia vel molestie et, lacinia non augue. Aenean quis iaculis
                velit. Sed aliquet semper metus quis egestas. Nullam lorem
                turpis, euismod nec feugiat at, venenatis quis odio. Aenean
                tellus libero, rutrum in mauris in, suscipit aliquam lacus.
                Proin ac viverra risus. Vivamus ullamcorper, massa id congue
                sagittis, erat ipsum aliquet tellus, nec sollicitudin erat
                risus vitae nisl.</p>
            </div>
        </div>
    </div>
</body>
</html>

JS

html {
    line-height: 1.618;
}

.background {
    background-color: #ffcd03;
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    z-index: 1;
}

.section {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 2;

    > * {
        width: 50%;
    }

    &__img {
        position: relative;
        display: flex;

        &__inner {
            height: 100vh;
            position: fixed;
            left: 5%;
            width: 40%;
            top: 0;
            mix-blend-mode: multiply;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
    }

    &__body {
        display: flex;
        align-items: center;
    }

    &__text {
        padding: 5vw;
    }
}


.section__img__inner {
    filter: blur(30px);
    opacity: 0;
    background-position: 50% 40%;
    transition: filter .6s ease, opacity .6s ease, background-position 0.8s ease;
}

.section.active .section__img__inner {
    opacity: 1;
    background-position: 50% 50%;
    filter: blur(0);
}

h2 {
    font-size: 3vw;
    margin-bottom: 0.5em;
    margin-top: 0;
}

html的每个部分都有一个与之关联的图像。当我滚动浏览右侧的html主体时，我试图让图像动态显示在屏幕的左侧。但是，上面的代码示例使用的是jQuery，我的应用程序是一个有角度的应用程序，因此我尝试将其调整为角度样式代码。如果我的标题不清楚或者没有描述我想要完成的任务，请告诉我。

（更新）这是我迄今为止的进展尝试：http://jsfiddle.net/nxhpg7rs/

必须硬编码$ window.pageYOffset，而不是像顶层的jQuery示例那样。

Answer 1

所以我想我明白了!!解决方案：http://jsfiddle.net/sn4qj6Lr/

以下是我的解决方案的.js：

app = angular.module('myApp', []);

app.directive("scroll", function($window) {
    var result = document.getElementsByClassName('section');
    return function(scope, element, attrs) {
            angular.element(document.querySelector('#first')).addClass('active'); //Loads the first image by default.
        angular.element($window).bind("scroll", function() {
            var scrollHeight = this.pageYOffset + (this.innerHeight / 3);
            for (var i = 0; i < result.length; i++) {
                var el = angular.element(document.querySelector('#' + result[i].id));
                if (el.prop('offsetTop') <= scrollHeight && el.prop('offsetTop') + el.prop('offsetHeight') > scrollHeight) {
                    el.parent().children().removeClass('active');
                    el.addClass('active');
                }
            }
        });
    };
});

我确实需要为html中的每个部分添加一个id，以便能够识别与其相关的元素并使用.prop（）,. addClass（）,. removeClass（）等。不确定是否有＆＃ 39;解决方法，其中每个＆＃34;部分＆＃34;不需要拥有它自己独特的ID。如果有的话，仍然会非常感谢任何建议！

AngularJS - 当div在视图中时（滚动），在类中添加和删除类。

1 个答案: