滚动时锁定 div Angular2

Question

我试图在滚动时将 div 保持在屏幕顶部。

我找到了几个指南和关于它的问题，但它对我不起作用。

我用过这些：

angular2 scroll then fixed header in bootstrap full page modal issue
http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/

这是我到目前为止所做的：

组件：

import {DOCUMENT} from '@angular/platform-browser';
@Component({
    selector: 'example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
    public fixed: boolean = false;
    constructor( @Inject(DOCUMENT) private doc: Document) {}
    ngOnInit(): void {
        this.onWindowScroll();
    }
    @HostListener('window:scroll', [])
    onWindowScroll() {
        let number = window.pageYOffset || document.documentElement.scrollTop || window.scrollY || 0;
        if (number > 100) {
            this.fixed = true;
        } else if (this.fixed && number < 10) {
            this.fixed = false;
        }
    }
}

html :

<body>
    <div [class.fixed]="fixed"> some content </div>
    <div> page content </div>
</body>

css :

.fixed{
    position: fixed;
    overflow: auto;
    z-index: 999;
}

我正在使用 Angular，它是最新的，带有节点服务器并在 Firefox 上进行测试。

这行不通，控制台没有错误。感谢您的帮助。

Answer 1

使用置顶位置

Plunker 演示：https://plnkr.co/edit/ouqElKKLehPYLexJdIxq?p=preview

.fixed{
        position: sticky;
        top:0;
        z-index: 999;
    }

滚动时锁定 div Angular2

Lock a div when scrolling Angular2

html

css

sticky

angular2-template

angular