sticky header and menu shrink on page scroll

Hi Sakin, is it possible to make this work? my site is http://9palacestcm.com

/**
* Make Header Shrink on Page Scroll
**/ 
add_action ('wp_footer','vr_shrink_head',1);
function vr_shrink_head() {
?> 
<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});
</script> 
<?php 
}

header.shrink {
  position:fixed;
  clear:both!important;
  width:100%;
  height:50px!important;
  max-height:50px!important;
  min-height:50px!important;
  z-index:999999999;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}