Do not scroll element size

Question

I create an angular directive that hides the element a when the user scrolls the element b. It works fine, but I can not understand this behavior:

It may be hard to say, but essentially, when you scroll the bottom, the scrollbar expands because element a is higher than element b, therefore, in essence, the thing I scroll has more free space. After that, I'm not sure why it scrolls. Here's the gif of the full page, if that makes it clearer:

My directive is written in typescript (angular version 1.5.7 NOT 2.x), I will work on its translation into javascript, but in the interest of getting this question here as soon as possible here ts:

interface IScope extends ng.IScope {
        showHeader: boolean;
    }
    export class IncodeHideHeaderDirective implements ng.IDirective {
        restrict = "AE";
        require: "ngModel";
        scope: Object;
        replace = true;
        link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
        oldy: number;
        justScrolled = false;


        constructor() {
            const self = this;
            this.link = (scope: IScope, element: ng.IAugmentedJQuery) =>
            {
                element.bind("scroll",
                    () => {
                        if (element[0].scrollTop > self.oldy) {
                            console.log("collapsing");
                            scope.$eval("showHeader=false");
                        }
                        else if (element[0].scrollTop < self.oldy)
                        {
                            console.log("expanding");
                            scope.$eval("showHeader=true");
                        }
                        self.oldy = element[0].scrollTop;
                    }
                );

                element.bind("load",
                () => {
                    console.log(scope);
                    this.oldy = element[0].scrollTop;
                });
            };
        }






        public static factory(): ng.IDirectiveFactory {
            const directive = () => new IncodeHideHeaderDirective();
            return directive;
        }


    }

    angular.module("incode.module")
        .directive("ixHeader", incode.directives.label.IncodeHideHeaderDirective.factory());

. ? , .

Answer 1

Angular, , position: fixed ( absolute)? , , .

.slideUp {
    /* ... */
    position: fixed;
}

https://jsfiddle.net/e8j938g8/3/