javascript - 使方 block 粘在滚动条上

Question

我在页面上有以下一组 block (div/spans):

CAPTION 1
CONTENT 1

CAPTION 2
CONTENT 2

....

CAPTION N
CONTENT N

我需要在滚动页面顶部设置字幕。例如

CAPTION 1
CAPTION 2

CAPTION 3
CONTENT 3
....

因此，第一 block 和第二 block 的内容折叠了，但标题仍然可见。此外，我需要为粘性字幕添加 onclick 事件。单击粘性标题后，页面应向上滚动到对应的内容。

这应该与 bootstrap 词缀插件类似，但标题应该只固定在滚动条上。

如何实现？有没有类似功能的插件？

提前致谢。

Answer 1

$(window).scroll(function() {
  var scrollPosition = $(window).scrollTop();
  if (scrollPosition !== 0) {
    $("#CAPTION1").addClass("fixed");
  } else {
    $("#CAPTION1").removeClass("fixed");
});

.fixed类有固定的位置，位于你需要的地方

其他字幕也一样