Don't scroll on element resize
<p>I'm making an angular directive that hides element a when the user scrolls on element b. It works fine, but I can't figure out this behaviour: </p>

<p><a href="https://i.stack.imgur.com/NadtZ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NadtZ.gif" alt="enter image description here"></a></p>

<p>It might be hard to tell, but essentially when you scroll to the bottom the scroll bar expands because element a sits above element b, so essentially the thing I'm scrolling on has more space available. After that, I'm not sure why it scrolls up. Here's a gif of the full page if that makes it any clearer: </p>

<p><a href="https://i.stack.imgur.com/nsSSQ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nsSSQ.gif" alt="enter image description here"></a></p>

<p>My directive is written in typescript (angular version 1.5.7 NOT 2.x), I'll work on translating it to javascript but in the interest of getting this question out there as quickly as possible here's the ts: </p>

<pre><code>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) =&gt;
            {
                element.bind("scroll",
                    () =&gt; {
                        if (element[0].scrollTop &gt; self.oldy) {
                            console.log("collapsing");
                            scope.$eval("showHeader=false");
                        }
                        else if (element[0].scrollTop &lt; self.oldy)
                        {
                            console.log("expanding");
                            scope.$eval("showHeader=true");
                        }
                        self.oldy = element[0].scrollTop;
                    }
                );

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






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


    }

    angular.module("incode.module")
        .directive("ixHeader", incode.directives.label.IncodeHideHeaderDirective.factory());
</code></pre>

<p>pretty basic stuff. How do I get the scrollbar to stop doing this weird stuff?
Here's <a href="https://jsfiddle.net/e8j938g8/1/" rel="nofollow noreferrer">a fiddle demonstrating the problem</a>.</p>