如何使用angularjs構建交互式滾動着陸頁？

Question

如何實現登陸頁面的指令，以便當窗口達到給定的剖面高度時，滾動時會將.fadein類添加到.box元素中？我發現很多jQuery或ScrollMagic.js的例子，但是找不到angularjs的例子。

我添加了基本的例子來說明這個想法：

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

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

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

Answer 1

啓動與此：

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

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

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