kaz*_*azu 3 html css sticky angular2-template angular
我正在尝试在滚动时在屏幕顶部保留一个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上进行测试.
这不起作用,在控制台中没有错误.谢谢你的帮助.
使用位置为粘性
Plunker演示:https://plnkr.co/edit/ouqElKKLehPYLexJdIxq ？ p = preview
.fixed{
position: sticky;
top:0;
z-index: 999;
}