如何使用angularjs构建交互式滚动登陆页面？

Question

如何实现登录页面的指令，以便在滚动时，当窗口达到给定的部分高度时，它会将.fadein类添加到.box元素？我在jQuery或ScrollMagic.js中找到了许多例子，但是找不到angularjs的任何例子。

我已经添加了基本示例来展示这个想法：

＆＃13;

＆＃13;

app = angular.module('myApp', []);
app.directive("scroll", function($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
      scope.fadein = true;
    });
  };
});

＆＃13;

body,
html,
.container {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}
.box {
  padding: 10px;
  display: none;
}
#example-1 {
  background-color: #FC6E51;
}
#example-2 {
  background-color: #4FC1E9;
}
#example-3 {
  background-color: #F4F4F4;
}
.fadein {
  display: block;
}
.center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app="myApp" scroll>

  <section id="example-1" class="container">
    <div class="box center fadein">
      <h1 class="">Show me when scrolled to this section</h1>
    </div>
  </section>

  <section id="example-2" class="container">
    <div class="box center">
      <h1 class="">Show me when scrolled to this section</h1>
    </div>
  </section>

  <section id="example-3" class="container">
    <div class="box center">
      <h1 class="">Show me when scrolled to this section</h1>
    </div>
  </section>

</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从这开始：

＆＃13;

＆＃13;

app = angular.module('myApp', []);
app.directive("scroll", function($window) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var offsetTop = element[0].offsetTop,
                offsetHeight = element[0].offsetHeight;

            checkScene();

            angular.element($window).bind("scroll", function() {
                checkScene();                     
            });

            function checkScene() {
                var bodyScrollTop = document.body.scrollTop;

                if (bodyScrollTop >= offsetTop
                    && bodyScrollTop <= offsetTop + offsetHeight) {
                    element.addClass('fadein');
                } else {
                    element.removeClass('fadein');
                }
            }
        }
    };
});

＆＃13;

body, html, .container {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.box {
    padding: 10px;
    display: none;
}

#example-1 {
    background-color: #FC6E51;
}

#example-2 {
    background-color: #4FC1E9;
}

#example-3 {
    background-color: #F4F4F4;
}

.fadein .box {
    display: block;
}

.center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span ng-app="myApp">
    <section id="example-1" class="container" scroll>
        <div class="box center">
            <h1 class="">Show me when scrolled to this section</h1>
        </div>
    </section>
    <section id="example-2" class="container" scroll>
        <div class="box center">
            <h1 class="">Show me when scrolled to this section</h1>
        </div>
    </section>
    <section id="example-3" class="container" scroll>
        <div class="box center">
            <h1 class="">Show me when scrolled to this section</h1>
        </div>
    </section>
</span>

＆＃13;

＆＃13;

＆＃13;