Menu
I'm trying keep a div at the top of the screen when I'm scrolling.
I found several guides and SO questions about it, but it's not working for me.
I worked with these :
And here's what I've done so far :
component :
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;
}
I'm using Angular, which is up to date, with a node server and testing on Firefox.
And this doesn't work, with no error in console. Thanks for your help.
773
Use position as sticky
Plunker Demo: https://plnkr.co/edit/ouqElKKLehPYLexJdIxq?p=preview
.fixed{
position: sticky;
top:0;
z-index: 999;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
