微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

更改视口大小后,Parallax.js背景出现了位移

如何解决更改视口大小后,Parallax.js背景出现了位移

我正在使用PixelCog的parallax.js。在我的网站上,如果我立即更改了视口的大小,例如通过单击“最大化”窗口选项,或将我的浏览器窗口大小固定为显示器的一半,视差背景的位置不会更新。 parallax.js使用“视差镜”类创建的div最终出现在错误的位置:

image showing the background div in the wrong position relative to the correct div (should be behind join the community)

我试图将以下内容添加到我的JS中:

jQuery(window).trigger('resize').trigger('scroll');

但这没什么区别。我的视差是这样初始化的:

   jQuery(document).ready(function($){

$('.parallax.cover,.parallax.hero').each(function(){
    image = $(this).data('background-image');
    $(this).parallax({imageSrc: image,position: 'center top' });
    $(this).addClass('initialised');
  })
  jQuery(window).trigger('resize').trigger('scroll');
});

在视差块上唯一可以说的CSS是:

    .parallax {
    min-height: 100px;
    position:relative;
    background-position:center;
} 
parallax.initialised {
        background-image: none !important;
        background-color:transparent !important;
    }

我已经仔细检查过一次,并且窗口调整大小事件正在触发,只是此视差功能无法相应地调整自身。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。