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>

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

1 个答案: