在wordpress上运行调整大小的徽标脚本

Question

我试图实现一个自定义标志收缩在一个网站，但我做了一些错误，无法定位的错误。也许你可以给点小建议。

所以我已经做的是：

1.带有style.css、functions.php、assets/js/my_shocinker.js的子主题

2.我在functions.php中添加了一个函数来加载

function shrinker() {
    wp_enqueue_script( 'my_shrinker', get_stylesheet_directory_uri().'/assets/js/my_shrinker.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'shrinker' );

3.添加了以下代码，以便在我的-shinker.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");
        }
        })
}

脚本应该在kad-header-左侧div中添加“收缩徽标”类，它具有以下css。

.shrinkedlogoyo { display: block !important; position: absolute !important; left: 8% !important; top: 2px !important; width: 45px !important; height: 45px !important; }

但是，这是不可能的，我也不会犯任何错误。你能给我一个好建议吗？

网站是http://arthome17.ru

Answer 1

没有正确地调用脚本“my-serinker.js”。

溢价/资产/js/my-spinker.js?ver=1.0.0

返回404。

这是因为get_template_directory_uri()在父主题中寻找脚本。

与您的子主题一起使用get_stylesheet_directory_uri()。

希望能帮上忙。

编辑，因为控制台中出现了新的错误(SyntaxError:缺失(在正式参数之前)

我建议您使用addClass()和removeClass()属性，并检查语法。

RE-编辑

如果希望在页面上运行脚本，就必须编写如下内容：

$ = jQuery.noConflict();
$(document).ready(function() { 
    window.addEventListener('scroll', function(event){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300;
        if (distanceY > shrinkOn) {
            $(".kad-header-left").addClass("shrinkedlogoyo");
        } else {
            $(".kad-header-left").removeClass("shrinkedlogoyo");
        }
    });
});

添加jsfiddle

这里是工作脚本的实例化。祝你好运！