修复了滚动实例在angular应用程序中正常工作的问题
修复了滚动实例在angular应用程序中正常工作的问题
提问于 2018-05-21 22:53:10
我试图在我的angular应用程序中的页面上应用一个固定的标题，但有问题让它完全工作。因此，当前如果用户展开页面上的折叠并向下滚动，标题会固定，但当页面折叠或向上滚动时，标题应该是正常的。因此，我编写的代码逻辑在某个时间点上可以工作，但当所有的手风琴都打开时就会失败。我觉得this.stickyTabsOffset值设置不正确有问题。
因此，当用户向下滚动选项卡时，当它们到达窗口顶部时，标题和div (选项卡下面的黑色部分)应该会被修复。在ngAfterViewInit方法中，我调用了两个元素的getelementById和，即strategyTabs (选项卡的div)和stragegyDetails (黑色部分的div)，然后设置this.stickyTabsOffset = this.stickyTabs.offsetTop；我还尝试了以下操作
this.stickyTabsOffset = this.stickyTabs.offsetHeight + this.strategyDetails.offsetHeight;
this.stickyTabsOffset = this.stickyTabs.offsetTop + this.strategyDetails.offsetTop;手风琴处于关闭状态时的屏幕截图。
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;
}回答 3
Stack Overflow用户
发布于 2018-06-01 23:21:22
对于这类东西，我使用类似这样的东西：
// 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
}希望这对您有一点帮助:)
Stack Overflow用户
发布于 2018-06-04 21:46:45
如果你不需要支持IE，你可以在你的CSS中使用position: sticky
下面是一个示例：https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky
Stack Overflow用户
发布于 2018-06-06 22:26:04
不久前，我决定不再依赖固定职位，并创建了自己的职位。实际上，这在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>
正如您在这个(非常小的)代码片段中看到的，固定位置是模拟的，但仍然表现得像它应该的那样。
(滚动条设置为自动，如果内容没有占据所有空间，它们将被隐藏)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50451419
复制相关文章
相似问题