我一直在拼命寻找一个纯 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:)
非常感谢帮助...!
最佳答案
将基于 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>
关于javascript - 滚动带有 overflow hidden 的 div 时粘性标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42191453/