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

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

所以我已经做了：

1.带有style.css、functions.php、assets/js/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");
        }
        })
}

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

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.添加此代码以在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");
        }
        })
}

脚本应该将“shrinkedlogo”类添加到kad头left div中，其中包含以下css

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

但是，好吧，这不会发生，我也不会有任何错误。你能给我一个好的建议吗

网站是

脚本“my shrinker.js”调用不正确

返回一个404

这是因为

get\u template\u directory\u uri（）

在父主题中查找脚本

使用

get\u stylesheet\u directory\u uri（）

代替子主题

希望能有帮助

编辑 由于控制台中出现新错误（SyntaxError:missing（在正式参数之前）

我建议您使用

addClass（）

和

removeClass（）

属性并检查语法

重新编辑

如果您想让脚本在页面上运行，则必须编写如下内容：

$ = 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");
        }
    });
});

添加JSFIDLE

---

这是工作脚本的一部分。祝你好运！

我的答案对你有帮助吗？是的，它工作得很好！很高兴听到它！所以请记住验证我的答案。；）祝你好运！嗨，阿德里安，我尝试了你的建议并更新了我问题中的代码。尽管它没有执行所需的操作。没有向div添加任何类。我必须以其他方式执行它吗？您现在在控制台中有一个错误：

SyntaxError:missing（在形式参数之前）

另外，当调用函数

my_shrinker

时？我通过将名称中的“-”改为“\ux”修复了控制台错误-错误消失。我如何调用函数？如果在我上面的代码中没有调用它，我认为它根本不会被调用。从子主题文件夹中删除空间也是一个好主意。做得好！