Javascript 滚动时，使第二个容器贴在第一个容器后的右上角

正如你在这里看到的：

从容器垂直滚动时，第一个容器会粘在顶部。它应该结束，第二个container SHADOW SERVER系列应该贴在顶部，替换第一个，当它从容器垂直滚动时，将第一个带到原始位置

现在，我使用这个JS代码使第一个代码保持不变，但当我将它用于第二个代码时，它将两者都保持在顶部，并且不会给出预期的结果：

var menu = document.querySelector('#sticky')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition) {
    menu.style.position = 'fixed';
    menu.style.top = '42px';
    menu.style.width = '100%';
} else {
    menu.style.position = 'static';
    menu.style.top = '';
}
});

---

我为我的英语不好道歉，我不是以英语为母语的人

如果你能使用CSS，我会在CSS中使用menuPosition作为state

因此，首先JS函数将控制状态：

var menu = document.querySelector('#sticky'),
    menuPosition = menu.getBoundingClientRect().top;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition){
        document.body.classList.add('scrolled');
    } else {
        document.body.classList.remove('scrolled');
    }
});

我使用了classList，它有一个。 正如黑曜石时代所指出的，当事件控制器的CSS是动态的时，将变量menuPosition从顶部移动到事件控制器内部

然后在CSS中，使用主体状态控制两个容器的偏移量：

#sticky { display: none; position: static; top: 48px; /*...*/ }
#sticky + #sticky2 { display: none;  position: static; width: 100%;/*...*/ }

.scrolled #sticky { display: block; position: fixed; }
.scrolled #sticky + #sticky2 { display: block; position: fixed; }

---

CSS中的+仅在两个容器都是同一父容器的直接子容器时才起作用。

对于此特定容器

---

我用了一种非常好用的开箱即用的方法。我在使用wordpress网站。我将脚本添加到header.php，并在所需页面上添加JS代码段，为两个容器设置ID，并给出z索引，以便它们在视图中位于彼此之上

听起来好像您想要做的是为顶部菜单设置第二个ID，并具有自己的var菜单等价物。然后，您将基于该变量的偏移量运行单独的if条件。在该条件中，您还可以在上面的代码中运行else。希望这是有道理的。而且，对于一个非英语母语的人来说，你的语法要比大多数本地人好得多；你能添加CSS吗？还是必须全部使用JS？@ObsidManager，我不确定使用哪种条件，我对JS不是很精通。哈哈，谢谢@TimVermaelen，我可以用CSS。找不到一个流行的浏览器兼容版本来获得预期的结果，所以我求助于那个小JS代码段。当然，它是有效的，你只需要找出你的CSS，因为我真的看不到那个部分。创建一个JSFIDLE。。。