Add on scroll header effect / transition with position property

Problem

I have a header which position:absolute on load I need to display it fix on particular scrolling so it working ..

but problem is that how I use header effect (i.e display with delay from upward) with position:fixed property.

code:

CSS

.iaw-header {
    position:absoulte
}

JS:

{
    if (jQuery(window).scrollTop() >= 700) {
       jQuery('.iaw-header').css('position','fixed');
    });   
}
Problem courtesy of: naCheex

Solution

HTML

<div id="header">
    Header text here.
</div>

CSS

.header { position: absolute; }

JS

if (jQuery(window).scrollTop() >= 700) {
    $('#header').css('top', '-300px'); 
    $('#header').css('position', 'fixed'); 
    $('#header').animate({top: 0}, 1000);
} else {
    $('#header').animate({top: '-300px'}, 1000, function () {
        $('#header').css('top', 0); 
        $('#header').css('position', 'absolute'); 
    });
}

So when the site loads (in CSS), the header can have top: -300px;, and when the user scrolls, you transition (or set) the header's top to 0px, so it scrolls down from the top.

Solution courtesy of: Hamza Kubba

Discussion

   $(window).scroll(function () {
    var i = $('.iaw-header')
    var h = i.outerHeight(true);
    if ($(window).scrollTop() > h) {
        if (!i.hasClass('fixed')) i.hide().addClass('fixed');
    }
    if ($(window).scrollTop() >= 400) {
        i.slideDown('fast');
    } else {
        i.removeClass('fixed').show();
    }
});

Add a class in your style:

.fixed {position: fixed;top:0; left:0;width: 100%; }

Perhaps, not the best code but still you can start building on it and modify to make it better. Here is the Jsfiddle link :http://jsfiddle.net/lotusgodkk/gxRC9/200/

Discussion courtesy of: K K

This recipe can be found in it's original form on Stack Over Flow.