$(function() {
$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".site-header").addClass("active");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $(".site-header").removeClass("active");
    }
});

function my_scripts_method() {
wp_enqueue_script(
    'header-active',
    get_stylesheet_directory_uri() . '/js/header-ative.js',
    array( 'jquery' )
);