Adding javascript to wordpress theme - wordpress

Question

I am new to wordpress. I need to create a website using wordpress so i need to add javascript file to wordpress themes..
For example what i want is the background color of header will be change when i scroll the page of my wordpress site.. For that i use javascript but its not worked for me..
I used like that below,
functions.php
function my_theme_enqueue_script() {
wp_register_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js' );
wp_enqueue_script( 'scrolldown');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );
scroll.js
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".site-header").addClass("active");
} else {
$(".site-header").removeClass("active");
}
});
style.css
.site-header {
height: 100px;
width: 1200px;
transition: all 0.2s ease-in-out;
z-index:10000;
margin-left:-90px;
position:fixed;
background-color: transparent;
margin-top:-70px;
}
.site-header.active {
background: #353535 !important;
}
I don't know what I did wrong.. Can anyone help me to solve my problem..
When i go to console, I have this window below screen shot,

Answer 1

STEP 1:
in your functions.php replace this:
function my_theme_enqueue_script() {
wp_register_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js' );
wp_enqueue_script( 'scrolldown');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );
with this:
function my_theme_enqueue_script() {
wp_enqueue_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script', 50, 0 );
STEP: 2
in your scroll.js replace this:
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".site-header").addClass("active");
} else {
$(".site-header").removeClass("active");
}
});
with this:
(function($){
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".site-header").addClass("active");
} else {
$(".site-header").removeClass("active");
}
});
})(jQuery)