Making a sticky header work

Question

I've got the following code for a sticky header , but I can't get the scroll to work and it's not a smooth transition. The #top-nav-wrapper barely scrolls when the fixed header below is activated:

<script>
$(document).scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 48 ) {
        $(".header").css("position", "fixed");
        $("body").css("padding-top", "90px");
    } else {
        $(".header").css("position", "relative");
        $("body").css("padding-top", "0");
    }
});
</script>

The 48 value is the height of the #top-nav-wrapper, plus it has a box-shadow.

The .header class with the search bar is what should remain.

The basic html:

<div class="headerWrapper">
    <div id="top-nav-wrapper"></div>
        <div class="header"></div>
</div>

The CSS:

body {
  background: #EEE;
}

#top-nav-wrapper {
  width: 100%;
  position: relative;
  box-shadow: 0px 1px 1px 0px #B8B8B8;
  z-index: 2001;
  background: #EEE;
}

.header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 90px;
  z-index: 2000;
  background: #EEE;
  height: 90px;
  box-shadow: 0px 1px 2px #C4C4C4;
}

* I tried the following suggestion, but it's the same effect as before:

<script>
        $(window).scroll( function() {
            var value = $(this).scrollTop();
            var $body = $('body');
            var docked = $body.hasClass('docked');    

            if ( value > 48 ) {
                if( !docked ) {
                    $body.addClass('docked');
                }
            } else {
                if( docked ) {
                    $body.removeClass('docked');
                }
            }
        });
        </script>

Any ideas appreciated.

Update - I've changed the script to the following and placed it in the head - this resolves the top nav not scrolling dynamically and I added a placeholder div after the header and before the content with the same size height as the fixed header to keep the content where it should be (because the fixed header changes the natural flow), but there's still the lag/jump when the fixed header kicks in.

Placeholder CSS:

.headerPlaceholder {
height: 90px;
width: 100%;
display: none;
}

Solution to top nav not scrolling all the way after 48px scroll height was set:

<script>
    $(document).ready(function () {
        var div = $('.header');
        var div2 = $('.headerPlaceholder');
        var start = $(div).offset().top;

        $.event.add(window, "scroll", function () {
            var p = $(window).scrollTop();
            $(div).css('position', ((p) > start) ? 'fixed' : 'static');
            $(div).css('top', ((p) > start) ? '0px' : '');
            $(div2).css('display', ((p) > start) ? 'block' : 'none');
        });

    });
</script>

To make it a smooth transition, there might need to be a slight delay and fadein/out effect, if anyone could help with that?

Answer 1

You can try

$(window).scroll( function() {
    var value = $(this).scrollTop();
    var $body = $('body');
    var docked = $body.hasClass('docked');    

    if ( value > 48 ) {
        if( !docked ) {
            $body.addClass('docked');
        }
    } else {
        if( docked ) {
            $body.removeClass('docked');
        }
    }
});

CSS

.docked {
    padding-top: 90px;
}
.docked .header {
    position: fixed;
    z-index: 2005;
}

You can be more efficient if there is an overall container you can target instead of body.