javascript - 滚动带有 overflow hidden 的 div 时粘性标题

Question

我一直在拼命寻找一个纯 JavaScript 解决方案，允许滚动 div 的内容(固定高度的 div，带有溢出:滚动)..

我已经看过很多带有 window.scroll 的 jquery 示例，但我真的一直在努力让它作为纯 css 在 div 元素上工作。

任何与我想做的类似的例子都是，

$('div.scrollingDiv').scroll(function () {
var active = null;
$('.scrollingDiv h4').each(function (idx, val) {
    var topOffset = $(val).offset().top;
    if (topOffset < 20) // elem is 20 px from top
    {
        // Element nearest the top
        active = $(val);
    }

    $('.stickyTop').html("Funky Menu : " + active.text());
});
});

..但显然没有jquery:)

非常感谢帮助...!

Answer 1

将基于 JQuery 的代码转换为纯 Javascript 的语法将是:

<script>
window.onload = function(e) { 
  document.querySelector('.scrollingDiv').onscroll = function(ev) {
    var title = "Funky Menu: ";
    var titleElem = document.querySelector('.stickyTop');
    var h4 = this.querySelectorAll('h4');
    var active = null;
    for (var i = 0; i < h4.length; i++) {
      if (h4[i].offsetTop - this.scrollTop < 30) {
        active = h4[i];
      } // elem is visible and close to top
    }
    if (active) {
      title += active.innerHTML;
    }
    titleElem.innerHTML = title;
  };
};
</script>