исправлены заголовки на scroll inst, работающие корректно в угловом приложении - PullRequest
Новая
       1

исправлены заголовки на scroll inst, работающие корректно в угловом приложении

0 голосов
/ 21 мая 2018

Я пытаюсь применить фиксированный заголовок к моим страницам в моем угловом приложении и не могу заставить его работать полностью.Поэтому в настоящее время, если пользователь расширяет аккордеоны на странице и прокручивает их вниз, заголовки фиксируются, но когда страница свернута или прокручена вверх, заголовки должны быть нормальными.Так что моя написанная логика кода работает в один момент времени, но не работает, когда все аккордеоны открыты.Я чувствую, что есть проблема с неправильным значением this.stickyTabsOffset.

Поэтому, когда пользователь прокручивает заголовки вкладок вниз, и div (черный раздел под вкладками) должен быть исправлен, когда они достигают верхней части окна.,В методе ngAfterViewInit я получаю вызов getelementById и двух элементов - StrategyTabs (div id вкладок) и stragegyDetails (div id черного раздела), а затем устанавливаю this.stickyTabsOffset = this.stickyTabs.offsetTop;Я также попробовал следующий 

this.stickyTabsOffset = this.stickyTabs.offsetHeight + this.strategyDetails.offsetHeight;
this.stickyTabsOffset = this.stickyTabs.offsetTop + this.strategyDetails.offsetTop;

Снимок экрана, когда аккордеоны находятся в закрытом состоянии.

enter image description here

import { Component, OnInit , AfterViewInit, HostListener } from '@angular/core';

 export class ResultsComponent extends Base.ReactiveComponent implements OnInit, AfterViewInit {

    @HostListener('window:scroll', [])
        onWindowScroll() {
            if (window.pageYOffset >= this.stickyTabsOffset) {
                this.stickyTabs.classList.add('sticky');
                this.strategyDetails.classList.add('fix-Container');
            } else {
                this.stickyTabs.classList.remove('sticky');
                this.strategyDetails.classList.remove('fix-Container');
            }
        }

        ngAfterViewInit() {
            const interval = setInterval(() => {
                this.stickyTabs = document.getElementById('strategyTabs') as any;
                this.strategyDetails = document.getElementById('strategyDetails') as any;
                if (this.stickyTabs && this.stickyTabs !== 'undefined' ) {
                    this.stickyTabsOffset = this.stickyTabs.offsetTop;
                    clearInterval(interval);
                }
            }, 500);
        }
}

css

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
  }

  .fix-Container {
    position: fixed;
    top: 75px;
    z-index: 1;
  }

Ответы [ 5 ]

0 голосов
/ 09 июня 2018

Вы должны получить позиционирование вашего элемента в событии прокрутки, а не на интервале.Нет гарантии, что интервал получит текущее позиционирование элемента при срабатывании события прокрутки, что означает неправильное позиционирование элемента.

Линия 

if (window.pageYOffset >= this.stickyTabsOffset)

должна быть 

if (window.pageYOffset > this.stickyTabsOffset)

Поскольку, если вы исправляете вкладки, их смещение становится равным 0, и если вы затем прокручиваете до верхней части страницы, pageYOffset также становится равным нулю, что означает, что else никогда не может срабатывать для сброса позиционирования вашего элемента.

Я взял ваш код и поместил его в несколько простых, ванильных JS и HTML. 

<body>
    <div style="position: static; top:30px; height: 300px; width: 300px; background-color:green"></div>
    <div id="test" style="position: static; top:0px; height: 300px; width: 300px; background-color:red"></div>
    <div style="position: static; top:30px; height: 300px; width: 300px; background-color:purple"></div>
    <div style="position: static; top:30px; height: 300px; width: 300px; background-color:yellow"></div>
    <div style="position: static; top:30px; height: 300px; width: 300px; background-color:gray"></div>
    <div style="position: static; top:30px; height: 300px; width: 300px; background-color:blue"></div>
</body>

А вот и JS.Я скопировал как можно больше вашего кода. 

<script>
    window.onscroll = function() {
        if ( window.pageYOffset > document.getElementById("test").offsetTop ) {
            document.getElementById("test").style.position = "fixed";
        } else {
            document.getElementById("test").style.position = "static";
        }
    }
</script>

Вы не должны исправлять два элемента.Оберните оба элемента в один элемент, затем закрепите этот элемент.Также - вы можете позаботиться об этом в другом месте, но я упоминаю это для назидания любого, кто проходит мимо - когда вы вырываете элемент из потока документов с помощью position:fixed, его предыдущее пространство больше не используется, то естьчто содержимое страницы будет испытывать резкое переворачивание.Поместите исправляемый элемент в родительский элемент с установленной высотой, которая не станет фиксированной.Это не позволяет странице переформатироваться.

Опять же, я не уверен, что вы делаете это где-то еще, но я думаю, что стоит упомянуть, что прямой доступ к документу - плохая практика.Вместо этого вы должны ввести токен Angular DOCUMENT .

0 голосов
/ 06 июня 2018

Некоторое время назад я решил перестать полагаться на фиксированные позиции и создал свою собственную.Это очень полезно в Angular на самом деле.

Хитрость заключается в том, чтобы создать контейнер со скрытым переполнением, которое занимает всю вашу страницу, и создать в нем другие контейнеры, которые могут переполниться.

Вы можете использовать либо гибкий макет, либо рассчитанный макет.Вот как: 

/* LAYOUT STYLE (SIDE BY SIDE) */

.main-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* FLEX LAYOUT (LEFT SIDE) */

.flex-layout {
  background: bisque;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.flex-layout header {
  flex: 0 0 50px;
}

.flex-layout content {
  flex: 1 0 auto;
  height: 0px;
}

.flex-layout footer {
  flex: 0 0 50px;
}

/* OLD LAYOUT (RIGHT SIDE) */

.old-layout {
  background: aliceblue;
  flex: 0 0 50%;
  position: relative;
}

.old-layout header {
  height: 50px;
  position: absolute;
  top: 0;
  width: 100%;
}

.old-layout content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
}

.old-layout footer {
  height: 50px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* COMMON STYLING CODE */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

* { box-sizing: border-box; font-family: Helvetica; font-weight: bold; text-transform: uppercase; }

header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

content {
  background: white;
  opacity: 0.75;
  border-bottom: 1px solid #ddd;
  overflow-y: auto;
}

footer {
  background: black;
  opacity: 0.20;
  
}

.content {
  height: 300%;
}
<div class="main-container">
 <div class="flex-layout">
   <header>Flex layout</header>
   <content><div class="content"></div></content>
   <footer></footer>
 </div>
 <div class="old-layout">
   <header>Old layout</header>
   <content><div class="content"></div></content>
   <footer></footer>
 </div>
</div>

Как вы можете видеть в этом (очень маленьком) фрагменте, фиксированная позиция моделируется, но все еще ведет себя так, как и должна.

(Полосы прокрутки установлены на авто, если контент не занимает все пространство, они будут скрыты)

0 голосов
/ 04 июня 2018

Если вам не нужна поддержка IE, вы можете просто использовать position: sticky в своем CSS

Вот пример: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky

0 голосов
/ 05 июня 2018

Поместите компонент заголовка в app.component , после этого добавьте router-outlet 

<div>
  <div>
    <app-header></app-header>
   </div>
   <div>
  <router-outlet></router-outlet>
   </div>
</div>

Надеюсь, это поможет вам.

0 голосов
/ 01 июня 2018

Для такого рода вещей я использую что-то вроде этого: 

// component.ts

navFixed: boolean = false;
private scrollOffset: number = 70;

@HostListener('window:scroll')
onWindowScroll() {
  this.navFixed = (window.pageYOffset 
    || document.documentElement.scrollTop 
    || document.body.scrollTop || 0
  ) > this.scrollOffset;
}

<!-- component.html -->

<header [class.fixed]="navFixed">
  <!-- Header content -->
</header>
<main>
  <router-outlet></router-outlet>
</main>

// component.scss

header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1001;  
  &.fixed {
    // Styles for a fixed header
  }
}

main {
    padding-top: 170px; // Your header height + some slack
}

Надеюсь, это немного поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...