Question

我正在尝试在网站上实现自定义徽标缩减，但我做错了，找不到错误。也许你可以提出一些小建议。

所以我已经做了：

1.Child主题与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”类添加到kad-header-left div中，该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-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：缺失（在形式参数之前）

我建议您使用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

这是工作脚本的live example。祝好运！

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

1 个答案: