I want to achieve a result, where my headers will go to the top of the page, when an actor scrolls past a certain point of the DOM, but my code doesn’t seem to work… I tried to refactor this code from this example:
http://jsfiddle.net/ax3uyk7k/
Right now nothing is happening at all…
//Jquery
var mn = $(".headers");
mns = ".headers-scrolled";
hdr = $(".titel").height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
//
HTML
<div id="wrap-scroll">
<div class="headers">
<h1 class="plan" >Plan</h1>
<h1 class="create">Create</h1>
<h1 class="share">Share</h1>
</div>
<main>
<div id="textContainer">
</br>
</br>
</br>
BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL.
BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL.
BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL.
</div>
</main>
</div>
//CSS
.create{
padding-left: 300px;
padding-right: 300px;
}
.headers {
display: inline-flex;
text-align: center;
}
.headers-scrolled {
top:0;
position:fixed;
width:100%;
}