Условный класс не всегда триггеров на Angular 2

Question

У меня есть следующий фрагмент, который отлично работает на Chrome, Edge, но не так хорошо в некоторых версиях IE 11 и Firefox.

В некоторых версиях IE 11 не всегда класс устанавливается, а в Firefox он имеет некоторую задержку.

Любые идеи, как это сделать лучше?

// TS

this.scrollYSub = Observable.fromEvent(window, 'scroll') 
    .throttleTime(5) 
    .subscribe(e => { 
     this.scrollY = window.scrollY || document.documentElement.scrollTop; 
});  

// HTML

<nav id="nav" [class.fixednav]="scrollY >= 245"> 

/* CSS */

.fixednav { 
    position: fixed; 
    top: 95px; 
} 

Answer 1

Насколько я знаю, накануне прокрутки nt не работает внутри зоны углов во всех браузерах из-за ограничений полиполков.

constructor(private cdRef:ChangeDetectorRef /* or private zone:NgZone */) {} 

this.scrollYSub = Observable.fromEvent(window, 'scroll') 
    .throttleTime(5) 
    .subscribe(e => { 
     this.scrollY = window.scrollY || document.documentElement.scrollTop; 
     this.cdRef.detectChanges(); 

     // or 
     /* 
     this.zone.run(() { 
      this.scrollY = window.scrollY || document.documentElement.scrollTop; 
     }); 
     */ 
});  

Если код изменяет только локальные свойства текущего компонента, this.cdRef.detectChanges();, как правило, лучше.

Если код также вызывает методы, которые вызывают изменения в других компонентах или услугах, то предпочтительным является подход zone.run(...), поскольку он выполняет обнаружение изменений всего приложения, а не только текущего компонента.

Альтернативный способ будет

scroll = new Subject(); 

@HostListener('window:scroll', ['$event']) 
onScroll(event) { 
    this.scroll.next(event); 
} 

, потому что этот способ гарантирует, что обработчик события выполняется внутри зоны углов главного.

Answer 2

применить CSS по умолчанию и скрыть элемент. Если это условие применяется, то покажите элемент (или примените класс, который покажет его). то вы не получите никаких прыжков во время загрузки страницы.