Sticky Header - Scroll - CSS / jQuery
I wish to create a sticky header. Everytime that the user scrolls down AND the original header goes away, then the "sticky" header should kick in. 

I currently use this:

  

      $(function(){
                // Check the initial Poistion of the Sticky Header
                var stickyHeaderTop = $('#sticky').offset().top;
                $(window).scroll(function(){
                        if( $(window).scrollTop() > stickyHeaderTop ) {
                                //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
                                $('#sticky').addClass("sticky");
                        } else {
                                $('#sticky').removeClass("sticky");
                        }
                });
          });


Although, the current one add the class "sticky" whenever a user just does a scroll, and not when the original header should be gone.

Regards
Sticky Header - Scroll - CSS / jQuery
===

I wish to create a sticky header. Everytime that the user scrolls down AND the original header goes away, then the "sticky" header should kick in. 

I currently use this:

  

      $(function(){
                // Check the initial Poistion of the Sticky Header
                var stickyHeaderTop = $('#sticky').offset().top;
                $(window).scroll(function(){
                        if( $(window).scrollTop() > stickyHeaderTop ) {
                                //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
                                $('#sticky').addClass("sticky");
                        } else {
                                $('#sticky').removeClass("sticky");
                        }
                });
          });


Although, the current one add the class "sticky" whenever a user just does a scroll, and not when the original header should be gone.

Regards