Question

我在8个可折叠部分中列出了链接here。我希望该部分的标题/切换器发粘或停留在查看端口中，但要使主体滚动。当下一个标题出现时，前一个标题应随其主体滚动而下一个标题将保持在页面顶部，依此类推，类似的操作将反转。

使用CSS属性position: sticky可以正常工作，但在某些浏览器中无法正常工作。

现在，我需要选择窗口顶部的元素。并使用JS或Jquery向其中添加position: fixed样式。

共享下面的代码只是为了理解否则它不起作用。

$(".collapsible").on('scroll', function(event) {
            if(event.target.offset().top() === $window.scrollTop()) {
                console.log(event.target);
            }
});

如果您有任何解决方案，请与我分享。

Answer 1

在this.classList.toggle("active");之后添加以下行：

var $top = this.offsetTop;
setTimeout(function() {
  window.scrollTo({
    top: $top,
    behavior: "smooth"
  });
}, 200);

选择已在Js或Jquery

1 个答案: