sticky Header auf ein Div mit verstecktem Überlauf Scrollen

Question

Ich habe verzweifelt versucht, eine reine Javascript-Lösung zu finden, die eine Rolle des Inhalts eines div erlauben würde (eine feste Höhe div, mit Überlauf: scroll) ..

Ich habe viele Beispiele mit jQuery gesehen, mit window.scroll, aber ich habe wirklich gekämpft, um dies auf dem div-Element als reines css arbeiten zu lassen.

Jedes Beispiel ähnlich dem, was ich zu tun ist, ich versuche,

$('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()); 
}); 
}); 

..aber offensichtlich ohne jquery :)

Hilfe wirklich zu schätzen ...!

Answer 1

Die Syntax Übersetzung von Ihnen JQuery basiertem Code in einfacher Javascript wäre:

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