Question

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

CAPTION 1
CONTENT 1

CAPTION 2
CONTENT 2

....

CAPTION N
CONTENT N

我需要在滚动页面顶部粘贴标题。 E.g。

CAPTION 1
CAPTION 2

CAPTION 3
CONTENT 3
....

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

这应该与bootstrap affix插件类似，但字幕应该仅在滚动时固定。

如何实现这一目标？有没有类似功能的插件？

提前致谢。

Answer 1

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

。固定类具有固定位置并位于您需要的位置

其他字幕也是如此

滚动时使块粘

1 个答案: