<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <header> <div class="container"> <div id="logo">Logo Here</div> <nav> <a href="#">Home</a> <a href="#">Blog</a> <a href="#">Courses</a> <a href="#">Jobs</a> <a href="#">Contact</a> </nav> </div> </header> <a id="scrollToTop" class="hide" href="#"><i class="fa fa-arrow-circle-up"></i></a> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); html,body{ padding: 0px; margin:0px; width: 100%; } .wrapper{ width:100%; height:auto; padding: 0; margin:0; overflow:hidden; min-height:2000px; } header{ width:100%; height:80px; color: #fff; background:#446cB3; line-height:80px; position: fixed; top: 0; transition: all 0.5s ease; box-shadow: 0px 2px 10px #fff inset; } .container{ width: 100%; max-width: 1024px; margin: 0 auto; } #logo{ font-family: ubuntu; font-size:40px; float: left; } nav{ float: right; font-family: ubuntu; } nav a{ color: #fff; text-decoration: none; font-size: 18px; margin: 0 15px; } nav a:hover{ color: red; } header.stivky{ background: rgba(211,84,0,0.9); height:50px; line-height:50px; box-shadow: 0px 2px 10px #000; } header .stivky #logo{ font-size:22px; } #scrollToTop{ font-size:3em; color:#446cB3; position:fixed; right: 40px; bottom:10%; transition: all 0.5s ease; } #scrollToTop:hover{ transform: scale(1.1,1.1); color:rgba(211,84,0,0.9); } .hide{ transition: all 0.5s ease; transform: scale(0,0); }

/*Head animatioon change JQuery code below*/ $(document).on('scroll',function(){ if($(this).scrollTop() > 1){ $('header').addClass('stivky'); } else{ $('header').removeClass('stivky'); } }); /*top botton Scroll to top animatioon change JQuery code below*/ $(document).on('click','#scrollToTop',function(){ $('html,body').animate({scrollTop:0},500); return false; }); /*top botton show/hide animatioon change JQuery code below*/ $(document).scroll(function(e){ var scrollpos = $(this).scrollTop(); if(scrollpos <500){ $('#scrollToTop').addClass('hide'); } else{ $('#scrollToTop').removeClass('hide'); } });