php - 在 wordpress 上运行调整大小 Logo 脚本

Question

我正在尝试在网站上实现自定义 Logo 收缩，但我做错了，无法找到错误所在。也许你可以给个小建议。

所以我已经做了:

1.带有style.css, functions.php, assets/js/my_shrinker.js的子主题

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”类添加到具有此 css 的 kad-header-left div

.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-shrinker.js”没有被正确调用。

http://arthome17.ru/wp-content/themes/virtue_premium/assets/js/my-shrinker.js?ver=1.0.0

返回 404。

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

对您的子主题使用 get_stylesheet_directory_uri()。

希望对您有所帮助。

编辑 由于控制台中的新错误(SyntaxError: missing ( before formal parameters)

我会建议您使用 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");
        }
    });
});

添加jsfiddle

这里是live example的工作脚本。祝你好运 !