Sticky Header CSS/Js

How to fix a header on scroll

You need some JS to do scroll events. The best way to do this is to set a new CSS class for the fixed position that will get assigned to the relevant div when scrolling goes past a certain point.

HTML

<div class="sticky"></div>

CSS

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

jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Example fiddle: http://jsfiddle.net/gxRC9/501/

EDIT: Extended example

If the trigger point is unknown but should be whenever the sticky element reaches the top of the screen, offset().top can be used.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Extended example fiddle: http://jsfiddle.net/gxRC9/502/

how to fix sticky header on scroll?

Please notice that element .class and element.class are different.
as you are targeting the header element in the function I can assume your problem is that you are looking for an element with .sticky class which is a descendant of header when you select header .sticky; but you need the header itself.

header .sticky {
  background: #fff;
  padding: 20px 100px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

consider using header.sticky to select the header with the .sticky class. you have to fix other selectors too.

header.sticky {
  background: #fff;
  padding: 20px 100px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

have a look at CSS Selectors for more selector patterns.

How to get a Sticky header on website using Javascript?

Step 1. Use header.sticky instead of header .sticky (remove space)

Step 2. Add the following style to header.sticky

position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;

How TO - Sticky Element

CSS Flexible Sticky Header which may Grow and Pushes Below Items Down

It will get resolved if you change the position property.

Change it to sticky: position:sticky

CSS sticky header onscroll

It looks like you need to add the background color to the .header css class before the .onscroll class is added by javascript. Maybe adding this to your css might do it:

.header {
  background-color: rgba(244, 244, 244, 0.95);
}

If that's not working, try adding it with !important like so:

.header {
  background-color: rgba(244, 244, 244, 0.95) !important;
}