Sticky header JQuery

Something Like that:
Sticky header JQuery

For that you need to create first html code.

HTML

<header>This is my header</header>

After that add this CSS code.

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 900px;
}

header {
  left: 0;
  right: 0;
  padding: 20px 10px;
  background: #ccc;
  text-align: center;
}
header.fixed {
  position: fixed;
}

Use jQuery Library.

After that add this JQuery code.

JS

$(window).bind("scroll", function(){
$(window).scrollTop() > 300 ? $('header').addClass('fixed') : $('header').removeClass('fixed');
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”Mvqoeg” default_tab=”css,result” user=”pradeepanvi”]See the Pen Sticky header JQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]