Running custom script for shrinking logo

[Sam]

Sam

November 5, 2016 at 6:54 am

Hi Kadence,

I’m trying to implement a custom logo shrink on a website, but I’m doing something wrong and can’t locate the mistake. Maybe you can give a small advice.

So what I already did:

1.Child theme with style.css, functions.php, assets/js/my-shrinker.js

2.I added a function to load my-shrinker.js in functions.php
function shrinker() {
wp_enqueue_script( 'my-shrinker', get_template_directory_uri() . '/assets/js/my-shrinker.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'shrinker' );

3.Added this code to perform shrink when scrolling in my-shrinker.js
function my-shrinker() {
window.addEventListener('scroll', function(event){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
d = document.getElementsByTagName("kad-header-left");
if (distanceY > shrinkOn) {
d.className += " shrinkedlogoyo";
} else {
d.classList.remove("shrinkedlogoyo");
}
})
}

4. The script should add “shrinkedlogo” class to the kad-header-left div, which has this css
.shrinkedlogoyo {
display: block !important;
position: absolute !important;
left: 8% !important;
top: 2px !important;
width: 45px !important;
height: 45px !important;
}

But, well, this ain’t happening and I’m not getting any error. Can you give me a good advice?

Website is *Login to see link