Search code examples
jqueryheadersticky

jQuery Sticky Header on Scroll un till the end of the Container

I want to stick a header when i scroll to that section of the page and it should stick to the top of the page until the container of that section ends.

Is there any good plugin to achieve this?

I tried the following but not able to get them to work

http://viget.com/inspire/jquery-stick-em http://www.orangecoat.com/stickyscroll

Solution

  • @Harsha M V

    Find the DEMO for your Question at http://jsfiddle.net/dKDJz/4/

    var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
sbBottom = Math.abs($window.height() - (offset.top + $sidebar.height())),
prevScrollTop = 0;

$window.scroll(function() {

if (prevScrollTop < $window.scrollTop()) {
    $sidebar.removeClass('fixedTop');
    if ($window.scrollTop() > (sbBottom + 12)) {
        $sidebar.addClass('fixedBtm');
    } else {
        $sidebar.removeClass('fixedBtm');
    }
} else {

    $sidebar.removeClass('fixedBtm');
    if ($window.scrollTop() > sbBottom) {
        $sidebar.addClass('fixedTop');
    } else {
        $sidebar.removeClass('fixedTop');
    }
}


prevScrollTop = $window.scrollTop();
});