1. Install Script n Style WP plugin 
2. Enter wp admin panel --> tools --> script n style --> add jQuery 
   1. 
3. Add the following script

   jQuery(document).ready(function($) {
       $(window).scroll(function () {
           if ($(window).scrollTop() > 100) { 
               $('header').addClass('shrink');
           }
           else{
               $('header').removeClass('shrink');
           }
       });
   });​

   1. here
   2.  
4. Add the following CSS

5. header.shrink{background-color: yellow;}​

     
   1. here
   2.  
6. now verify in the website (front) it is working
   1. Before (scrolling down)
      1. 
   2. After (scrolling down)
      1. 

Source sticky header and menu shrink on page scroll