function stickyDiv() {
var $el = $('header'),
$div = $('#someStickyDiv'),
scrollTop = $(this).scrollTop(),
scrollBot = scrollTop + $(this).height(),
elTop = $el.offset().top,
elBottom = elTop + $el.outerHeight(),
visibleTop = elTop < scrollTop ? scrollTop : elTop,
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom,
visible_header = (visibleBottom - visibleTop);
if(visible_header >= 0) {
$div.css("top", visible_header);
} else {
$div.css("top", '0px');
}
}
$(window).on('scroll resize', stickyDiv);
Position a sticky div to be below the header, and when the header is out of view on the window, the div sticks to the top of the page.
1 Response
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.