Question

正如您在此处所见：http://www.shadownet.com.mv/products-2/

当从容器垂直滚动时，第一个容器粘在顶部。它应该结束，第二个容器＆＃34; SHADOW SERVER SERIES＆＃34;当它从容器垂直滚动时，应该粘在顶部，将第一个（将第一个带到原始位置）。

现在我使用这个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 = '';
}
});

我为我糟糕的英语道歉，我不是母语人士。

Answer 1

如果你可以使用CSS，我会在CSS中使用menuPosition作为状态。

首先，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 menuPosition。正如Obsidian Age指出的那样，当事件控制器的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中，使用body状态来控制两个容器的偏移量：

CSS中的{{1}}仅在两个容器都是同一父项的直接子项时才有效。

Answer 2

对于这个特殊的，

我使用了stickyJS，它工作得非常好，开箱即用。我正在使用wordpress网站。我将脚本添加到header.php并在所需页面上添加了JS片段，为两个容器设置了ID，并给出了z-index，以便在视图中它们相互高于对方。

滚动

2 个答案: