Question

我正在尝试在滚动时在屏幕顶部保留一个div。

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

我使用过这些：

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

组件：

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 Demo：https://plnkr.co/edit/ouqElKKLehPYLexJdIxq?p=preview

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

滚动Angular2时锁定div

1 个答案: