Javascript 找到可见部分并在其顶部放置注释

我在一页中有一个

div

列表：

<div class="section"><span>Client Information </span>
 <!-- Some fields here -->
</div>
<div class="section"><span>Billing Information </span>
 <!-- Some fields here -->
</div>
<div class="section"><span>Contact Information </span>
 <!-- Some fields here -->
</div>

比如说

页面加载时，

客户端信息

是可见部分。注意事项应出现在客户信息部分的顶部

用户向下滚动，

账单信息

是可见部分。注释应出现在账单信息部分的顶部

当用户转到联系人信息部分时，注意事项应显示在联系人信息部分的顶部

如果用户回滚到

客户信息

部分，则注释应显示在客户信息的顶部

重要提示1：注意div应该只出现在部分的顶部，而不是重叠部分字段

我试着用

.note {
 position:fixed;
 width:100%;
 z-index:1080;
}

但这使得note div重叠了部分字段，而我没有

重要事项2：部分div位于固定导航栏和徽标下方。这样，当第一部分可见时。注：div必须位于徽标和第一部分之间

---

您需要一些javascript来检测窗口是否已滚动超过note元素的垂直偏移量，并仅在以下情况下应用

位置：fixed

：

---

位置有什么问题：已修复？当便笺和div发生冲突时会发生什么情况？您的解决方案有两个问题。
1。导航条自身固定在顶部。所以注意div隐藏在它后面。2.

Note div

带

宽度：100%

在页面上看起来不太好。因为段落的宽度大约是页面宽度的60%。@ HimanshuYadav，你可以调整宽度/填充/位置，不管你喜欢什么。我不知道您的页面是如何布局的，但是您可以将

顶部

调整为稍低一点以适应导航栏。此外，如果导航栏是固定的，它不也涵盖了部分吗？如果是这样，您可以将“便笺”放在导航栏中。我所演示的只是在类似于您的实例中通常所做的一般概念。

.note {
 position:fixed;
 width:100%;
 z-index:1080;
}