Trouble assigning background color on scroll

Question

I'm trying to change the design of my hamburger navigation as the user scrolls. I feel I have come semi close https://jsfiddle.net/g95kk7yh/6/

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 10) {
                $(".navigation").css('background', 'rgba(255, 0, 0, 0.5)');
                $(".navigation span").css('background', '#bdccd4');
            } else {
                $(".navigation").css('background', 'transparent');
                $(".navigation span").css('background', '#fff');
            }
        });
    });

Here is what I'm trying to achieve

The main problem I'm having is assigning the correct width and height of the red box without repositioning the navigation menu as a whole.

Also is it possible to only have these changes at 600px and under (as you can see this is when the hamburger menu shows).

Answer 1

I have used @potatopeelings post and have changed few lines and added.

.myClass {
  margin-right: -25px;
  width: 85px;
  height: 85px;
  background-color: rgba(255, 0, 0, 0.5);
}

Fiddle: https://jsfiddle.net/moj7z2b4/2/