javascript - 使块粘在滚动上

Question

我在页面上有以下一组块（div/span）：

CAPTION 1
CONTENT 1

CAPTION 2
CONTENT 2

....

CAPTION N
CONTENT N

我需要在滚动页面的顶部使标题保持粘性。例如

CAPTION 1
CAPTION 2

CAPTION 3
CONTENT 3
....

因此，第 1 块和第 2 块的内容已折叠，但标题仍然可见。此外，我需要为粘性字幕添加 onclick 事件。单击粘滞标题后，页面应向上滚动到相应的内容。

这应该类似于引导词缀插件，但标题应该只在滚动时固定。

如何做到这一点？有没有类似功能的插件？

提前致谢。

Answer 1

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

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

其他字幕也一样