AngularJS: Offset Detection

by Alberto Naperi Jr.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- http://stackoverflow.com/questions/30978941/angularjs-how-to-calculate-distance-between-2-div-and-hide-current-top-scrollin -->

<div ng-app="myApp">
    <div ng-controller="YourCtrl">
        <div class="main"></div>
        
        <div class="all"><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
            <div class="elems"></div>
        <div>
    </div>
</div>

CSS

.main {
    width: 500px;
    height: 100px;
    border: 1px solid;
    float: left;
    clear: both;
}
.all {
    float: left;
    clear: both;
    width: 500px;
    height: 500px;
    border: 1px solid #ff0000;
    overflow: auto;
}
.elems {
    width: 400px;
    height: 200px;
    border: 1px solid #c0c0c0;
}

.elems:first-of-type {
    background: red;
}

JavaScript

'use strict';

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

app.controller('YourCtrl', ['$scope', function ($scope) {
    
    var verticalScrollPosition;
    var mainClassHeight = 100;
    var elemsClassHeight = 200;
    var firstElemsClassOffset = $('.elems:first-of-type').offset().top - mainClassHeight;
    var classLength = $('.elems').length;
    console.log(classLength);
    
    $('.all').scroll(function() {
        verticalScrollPosition = $(this).scrollTop();
        if (verticalScrollPosition >= (firstElemsClassOffset + (elemsClassHeight / 2))) {
            $('.elems:first-of-type').fadeOut();
        } else {
            $('.elems:first-of-type').fadeIn();
        }
    });
    
}]);