Sticky Header

main.js

 $(window).scroll(function(){
    if($(this).scrollTop() > 1){
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});

stickyHeader.html

<header>
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<div class="logo">
					<img src="img/logo.jpg" alt="">
				</div>
			</div>
			<div class="col-md-9">
				<div class="main-menu">
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">Tours</a></li>
						<li><a href="">Hotels</a></li>
						<li><a href="">Contact</a></li>
						<li><a href="">About Us</a></li>
						<li><a href="">Cart</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</header>

style.css

header{
    height: 100px;
    background-color: #3B5998;
    text-align: center;
    transition: all 0.5s ease;
}
header.sticky{
    position: fixed;
    height: 65px;
    width: 100%
}
.logo_image {
    margin-top: 14px;
    width: 260px;
    transition: all 0.5s ease;
}
header.sticky .logo_image {
  margin-top: 7px;
  width: 184px;
}
.main-menu{text-align: right;}
.main-menu ul{
  transition: all 0.5s ease;
}
.main-menu ul li{
  display: inline-block;
  border-top: 4px solid #3B5998;
  padding-top: 30px;
  transition: all 0.5s ease;
}
header.sticky .main-menu ul li{
  padding-top: 12px;
}
.main-menu ul li:hover{
  border-top: 4px solid #fff;
  
}
.main-menu ul li a {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 0 25px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
  text-decoration: none;
}
.main-menu ul li a:hover{}