如何使用粘性标题将Angular应用程序中的元素滚动到视图中？

我有一个粘性的导航条，我想点击一个按钮，让那个元素滚动到视图中

这是可行的，但它总是将标题放在我试图滚动到视图中的元素的顶部

html模板：

<div id="arrow-wrapper">      
                <div (click)="onArrowClick()" class="arrow-border">        
                  <div class="arrow down"></div>
                   <div class="pulse"></div>               
                </div>    
              </div>  
...
<div style="padding: 0 10px;">
  <h1 #gearUp [ngClass]="routeAnimationsElements" class="heading">Gear Up!</h1>

---

在上面的示例中，window.scrollTo或targetElement.scrollBy不起作用。只有targetElement.ScrollIntoView起作用，但这会将header元素置于锚元素的顶部。我应该如何处理这个问题？

不太确定使用document.getElemBy访问不同的元素是否是一个好主意。。。（对于重构等），但您可以这样做：

const navigationRect = document.getElementById('sticky-header-id').getBoundingClientRect();
const padding = 30; // if needed
const offSet = navigationRect.top + navigationRect.height + padding;

const currElemRect = this.el.nativeElement.getBoundingClientRect();

const currentElemPosition = window.scrollY + currElemRect.top;
const scrollY = currentElemPosition - offSet;
window.scrollTo(0, scrollY);

---

您是否尝试过在顶部显示您希望看到的元素的z索引？我没有，但主要是因为我不想在标题顶部显示锚元素。我希望显示在标题下方，就好像标题是正常文档流的一部分一样。也许这有帮助：也请阅读：这确实有效，事实上它也能按预期工作，但它不能解释粘性标题。

const navigationRect = document.getElementById('sticky-header-id').getBoundingClientRect();
const padding = 30; // if needed
const offSet = navigationRect.top + navigationRect.height + padding;

const currElemRect = this.el.nativeElement.getBoundingClientRect();

const currentElemPosition = window.scrollY + currElemRect.top;
const scrollY = currentElemPosition - offSet;
window.scrollTo(0, scrollY);