粘頭

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>