Lock a div when scrolling Angular2

Question

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.

Rohan Fating · Accepted Answer · 2017-09-07T10:11:43.113

9

Use position as sticky

Plunker Demo: https://plnkr.co/edit/ouqElKKLehPYLexJdIxq?p=preview

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

edited Sep 07 '17 at 10:11

answered Sep 07 '17 at 10:05

Rohan Fating

2,135
15
24

Ok, I tried this, but it didn't work. I guess the problem is somewhere else. Thanks though. – derOtterDieb Sep 07 '17 at 10:55
Did you check plunker – Rohan Fating Sep 07 '17 at 11:15
Yes it works perfectly on the plunker you provided. But for some reasons that I don't get, it doesn't on my project. – derOtterDieb Sep 07 '17 at 11:20
Also remove class.fix from your div use plain classlike
some content
, you do not need hos listener also. – Rohan Fating Sep 07 '17 at 11:22
Alright, that was the problem. [class.fixed] didn't work as I expected. Using class="fixed" works totaly fine. Thanks again ! – derOtterDieb Sep 07 '17 at 11:24

Lock a div when scrolling Angular2

1 Answers1