Angular:

http://angularjs.org/

HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="article in articles" class="block" scroll="atNewArticle(article)">
        <h1>{{article.title}}</h1>
        <p>{{article.body}}</p>
    </div>
</div>

CSS

.block{
height:300px;
}

JavaScript

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

app.directive('scroll', function ($parse,$window) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {
            angular.element($window).bind("scroll", function() {
                console.log('im scrolling');
                // Want to execute function if element is <= 100px from top
                //if(element.offsetTop <= 100){
                    //How do I only execute this function once per transition?
                    scope.$apply(attrs.scroll);
                //}
            });
        }
    };
});

function MyCtrl($scope) {
    
    $scope.articles = [
        {title:'article1',body:'body of article1'},   
        {title:'article2',body:'body of article2'},
        {title:'article3',body:'body of article3'}
    ]
    
    $scope.atNewArticle = function () {
        //i only execute when transitioning back and forth between articles
        console.log(article);
    };
}