AngularJS - Добавляет и удаляет класс для элемента, когда div находится в пределах видимости (прокрутка).

Question

AngularJS - Добавляет и удаляет класс для элемента, когда div находится в пределах видимости (прокрутка).

0

Прежде всего, вот что я пытаюсь достичь: http://codepen.io/daveredfern/pen/JKpKjX

HTML

<!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>

CSS

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

JS

$(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.section');

  var scroll = $window.scrollTop();

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

            $('.section').removeClass('active');
            $this.addClass('active');

    }
  });    

}).scroll();

Каждый раздел html имеет связанное с ним изображение. Я пытаюсь сделать изображение динамически появляться в левой части экрана, когда я просматриваю тело html с правой стороны. Однако в приведенном выше примере кода используется jQuery, и мое приложение является угловым приложением, поэтому я пытаюсь адаптировать его к коду углового стиля. Пожалуйста, дайте мне знать, если мой заголовок неясен или не описывает то, что я пытаюсь выполнить.

(ОБНОВЛЕНО) Это моя работа в процессе покупок: http://jsfiddle.net/nxhpg7rs/

Если бы я сделал hardcode $ window.pageYOffset вместо того, чтобы делать это, как это делает пример jQuery.

j.castillo 21 июль 2016, в 05:57

Источник

Теги:

jquery

angularjs

web

1 ответ

Ещё вопросы

j.castillo · Answer 1 · 2016-07-21T19-05-00.000Z

Поэтому я думаю, что получил! Решение: 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');
                }
            }
        });
    };
});

Мне нужно было добавить id в каждый раздел в html, чтобы иметь возможность идентифицировать связанный с ним элемент и использовать.prop(),.addClass(),.removeClass() и т.д. Не уверен, есть ли способ обхода, где каждый "Раздел" не обязательно должен иметь свой уникальный идентификатор. Если есть, любые предложения по-прежнему будут высоко оценены!