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

我一直在拼命寻找一个纯javascript解决方案，允许滚动div的内容（一个固定高度的div，带有overflow:scroll）

我已经看过很多jquery的例子，包括window.scroll，但是我一直在努力让它作为纯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());
});
});

$（'div.scrollingDiv'）。滚动（函数（）{
var-active=null；
$（'.scrollingDiv h4'）。每个（函数（idx，val）{
var topOffset=$（val）.offset（）.top；
if（topOffset<20）//elem距离顶部为20px
{
//最靠近顶部的元素
活动=$（val）；
}
$（'.stickyTop'）.html（“时髦的菜单：“+active.text（））；
});
});

…但显然没有jquery:）

---

非常感谢你的帮助

基于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>

window.onload=函数（e）{
document.querySelector（'.scrollingDiv'）。onscroll=function（ev）{
var title=“Funky菜单：”；
var titleElem=document.querySelector（'.stickyTop'）；
var h4=this.querySelectorAll（'h4'）；
var-active=null；
对于（变量i=0；i

基于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>

window.onload=函数（e）{
document.querySelector（'.scrollingDiv'）。onscroll=function（ev）{
var title=“Funky菜单：”；
var titleElem=document.querySelector（'.stickyTop'）；
var h4=this.querySelectorAll（'h4'）；
var-active=null；
对于（变量i=0；i

谢谢Javier，这是一个很大的帮助，但是它似乎没有正确地更新.stickyTop元素的innerHTML-翻译是正确的。然而，最初的逻辑不足以实现您想要的。如果我理解正确，您希望根据可见段落的标题更新标题。试试这个新的更新答案（跟着你的小提琴）。嗨，哈维尔，太完美了！非常感谢！！不客气。你认为答案正确吗？如果可以的话。当然，不幸的是，我看到了“谢谢你的反馈！声誉低于15的人所投的票会被记录下来，但不会改变公开显示的帖子分数。“然而，你的帮助真的得到了感谢，值得投上一票！谢谢Javier，这是一个很大的帮助，但是它似乎没有正确地更新.stickyTop元素的innerHTML-翻译是正确的。然而，最初的逻辑不足以实现您想要的。如果我理解正确，您希望根据可见段落的标题更新标题。试试这个新的更新答案（跟着你的小提琴）。嗨，哈维尔，太完美了！非常感谢！！不客气。你认为答案正确吗？如果可以的话。当然，不幸的是，我看到了“谢谢你的反馈！声誉低于15的人所投的票会被记录下来，但不会改变公开显示的帖子分数。“然而，你的帮助真的得到了感谢，值得投上一票！