javascript - Không cuộn khi thay đổi kích thước phần tử

Tôi đang tạo một directive Angular để ẩn phần tử a khi người dùng cuộn trên phần tử b. Nó hoạt động tốt, nhưng tôi không thể hiểu được hành vi này:

Có thể khó nhận ra, nhưng về cơ bản khi bạn cuộn xuống cuối trang, thanh cuộn mở rộng vì phần tử a nằm trên phần tử b, nên về cơ bản thứ mà tôi đang cuộn có nhiều không gian hơn. Sau đó, tôi không chắc tại sao nó lại cuộn lên. Đây là một ảnh gif của toàn bộ trang nếu điều đó làm nó rõ ràng hơn:

Chỉ thị của tôi được viết bằng TypeScript (phiên bản Angular 1.5.7 KHÔNG phải 2.x), tôi sẽ làm việc để chuyển nó sang JavaScript nhưng với mục tiêu đưa câu hỏi này ra càng nhanh càng tốt, đây là 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());

Những thứ khá cơ bản. Làm thế nào để tôi ngăn thanh cuộn làm những thứ kỳ lạ này? Đây là một ví dụ minh họa vấn đề.

Câu trả lời #1

Đó không phải là câu trả lời cho Angular, nhưng tại sao bạn không chỉ loại bỏ thanh tiêu đề khỏi luồng bằng cách đặt nó position: fixed (hoặc absolute)? Điều đó sẽ không gây ra việc sắp xếp lại nội dung chính, và bạn sẽ không gặp phải bất kỳ vấn đề nào mà bạn đang trải nghiệm.

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

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