I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/
Here's My Code:
<div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
<h2 class="persist-header">rgergergerg</h2>
<div class="nom-img">
<a href="ergeg.html"><img src="img/ergerg.jpg"></a>
</div>
<div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
<h4><a href="#">serger</a></h4>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
<h2 class="persist-header">rgergergerg</h2>
<div class="nom-img">
<a href="ergeg.html"><img src="img/ergerg.jpg"></a>
</div>
<div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
<h4><a href="#">serger</a></h4>
</div>
</div>
Using jQuery
var clonedHeaderRow;
$(".persist-area").each(function() {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
CSS Styling
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}
The issue I'm encountering is that the fixed positioning is not functioning as expected. The header moves up instead of staying fixed. What could be causing this problem?