滚动脚本上的动画更改徽标大小会导致库冲突或其他一些加载问题

Posted 2021-05-03

我希望当页面向下滚动时徽标缩小，并在页面滚动到顶部时展开为原始徽标。除了带有旋转图标的预加载器，我的代码可以防止页面加载。

环境是Joomla 3.8.2。该模板基于Helix 3，我使用Helix 3 Custom Code表单为javascript插入JS。

我尝试从这个页面调整脚本：Jquery image height change on scroll

这是我的版本：

<script>
var imageHeight = 113,
stopHeight= 90,
PaddingHeight = 148,
stopPadding= 3;

$(window).scroll(function(e) {
    var windowScroll = $(window).scrollTop(),
    newPadding = PaddingHeight - windowScroll,
    newHeight = imageHeight - windowScroll;
    if(newHeight>=stopHeight){
        $('.sp-default-logo').css("height", newHeight);
        $('.logo').css("padding-top", newPadding);
    }
    else{
        $('.sp-default-logo').css("height", stopHeight);//if it scroll more set to stopHeight
        set $('.logo').css("padding-top", stopPadding);
    }
};
</script>

这是html：

<div class="logo">
    <a href="/"><img class="sp-default-logo" src="/images/logos/logo.jpg"></a>
</div>

Joomla在安全模式下使用jquery，因此“$”应该是“jQuery”“。我尝试了$和jquery。两者都创建了相同的错误。

控制台中的错误是：

JQMIGRATE：已安装Migrate，版本1.4.1 - jquery-migrate.min.js？ada38a6f4381020b76588ff4bab21f69：2

未捕获的SyntaxError：意外的标识符 - （索引）：222

注意：我首先将此发布到Joomla论坛，但由于缺乏兴趣，我将在此处转发。

答案

你需要使用！jquery名称而不是$！试试这个我相信在Joomla中包含的jQuery版本中不推荐使用jQuery live方法。它适用于示例代码，因为您正在加载jQuery 1.6.4。在Joomla代码中尝试使用这个：

<script>
var imageHeight = 113,
stopHeight= 90,
PaddingHeight = 148,
stopPadding= 3;
jQuery.noConflict();

jQuery(window).scroll(function(e) {
    var windowScroll = jQuery(window).scrollTop(),
    newPadding = PaddingHeight - windowScroll,
    newHeight = imageHeight - windowScroll;
    if(newHeight>=stopHeight){
        jQuery('.sp-default-logo').css("height", newHeight);
        jQuery('.logo').css("padding-top", newPadding);
    }
    else{
        jQuery('.sp-default-logo').css("height", stopHeight);//if it scroll more set to stopHeight
        set jQuery('.logo').css("padding-top", stopPadding);
    }
};
</script>

另一答案

我转而使用CSS来获得更优雅的解决方案。

#sp-header.menu-fixed .logo {
  width: 261px;
  height: 85px;
  padding: 0;
}

#sp-header.menu-fixed .sp-default-logo {
  width: auto;
  height: 81px;
  margin-top: 44px;
  padding-left: 18px;  
}