Плавающее меню - Angular 2, AngularJS - Ответ 13459739

@Anna5194 · 03.04.2019, 11:43 **[ТС]**

Сама сделала. Ловите новый код

Javascript

@HostListener("window:scroll", ['$event']) onScroll(){
    if (this.contentBlock.nativeElement.getBoundingClientRect().top < 0){
 
      if(!this.isSetPositionFixed){
        this.renderer.removeClass(this.menuBlock.nativeElement, 'fixed');
        this.renderer.addClass(this.menuBlock.nativeElement, 'stop');
      }
      else{
        this.renderer.addClass(this.menuBlock.nativeElement, 'fixed');
        this.renderer.removeClass(this.menuBlock.nativeElement, 'stop');
      }
      
      this.element = document.elementFromPoint(500, 0);
      this.elementId = this.element.id;
 
      // Высота блока меню
      this.menuBlockHeight = this.menuBlock.nativeElement.offsetHeight;
      // Высота блока контента
      this.contentBlockHeight = this.contentBlock.nativeElement.offsetHeight;
 
      this.checkAntiFixed = (this.contentBlock.nativeElement.getBoundingClientRect().top + this.contentBlockHeight - this.menuBlockHeight) < 0;
      this.isSetPositionFixed = !this.checkAntiFixed;
 
      
      console.log('check: ', this.checkAntiFixed);
      console.log('ContentTop: ', this.contentBlock.nativeElement.getBoundingClientRect().top + this.contentBlockHeight - this.menuBlockHeight);
      
      this.element = document.elementFromPoint(500, 0);
      this.elementId = this.element.id;
    }
 
    else{
      this.element = null;
      this.elementId = 'start';
      this.renderer.removeClass(this.menuBlock.nativeElement, 'fixed');
    }
    
  };

Теперь 3 стиля отлично сменяют друг друго, НО (как без "но" в программировании) сменяют они друг друга только при скролинге. К примеру, если нажать на меню, чтобы меня проскролило до нужного пункта текста, то менюшка остаётся внизу в стиле 'stop'. Чтобы оно работало, надо будет скролить. Сейчас сижу, думаю, как исправить. Если есть идеи, отпишитесь. Да, прошлый код не работал, потому что ангуляр при вычислении отсеивает переменные. Потому надо ухищраться как-то. А ещё, все коды, что я здесь скинула, написаны на typescript, не на js. Это важно. Но если я не буду помещать это в спец. скобочки, то, блин, ошибка, видители, на этом форуме и сразу же начинают исправлять. Ребят, если ещё какой код скинуть, пишите, не молчите

Добавлено через 1 минуту
Забыла написать, как я получила высоты всего

Javascript

export class HowToRentPageComponent implements AfterViewInit {
  element: any = null;
  elementId: string = 'start';
  menuBlockHeight: number = 0;
  contentBlockHeight: number = 0;
  footerBlockHeight: number = 0;
  checkAntiFixed: boolean;
  isSetPositionFixed: boolean;

Этот код стоит перед предыдущим кодом, если что.

Добавлено через 51 минуту
А ещё, для плавного скроллинга, я в конструкторе добавила это

Javascript

scrollToElement(val: string){
    var el = document.getElementById(val);
    var coord = el.offsetTop;
    // window.scrollTo(0, coord);
    window.scrollTo({
      top: coord,
      left: 0,
      behavior: "smooth"
    });
  }

Вернуться к обсуждению:
Плавающее меню Angular 2, AngularJS