滚动带有隐藏溢出的div的粘性标题

Question

我一直在拼命寻找一个纯粹的javascript解决方案，它允许滚动div的内容（固定高度div，溢出：滚动）。

我已经看到很多jquery示例，使用window.scroll，但我真的一直在努力让这个在div元素上工作为纯css。

任何类似于我想要做的例子是，

$('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>