我正在尝试修复我们的演示网站上的视差效果,但是对于我的生活,我无法正常工作。视差效果完美地工作,但是图像的定位在下面重复。当浏览器窗口不是全宽时,会出现此问题。
background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;
background-size: cover;
的jQuery
jQuery(document).ready(function(){
// cache the window object
$window = jQuery(window);
jQuery('section[data-type="background"]').each(function(){
// declare the variable to affect the defined data-type
var $scroll = jQuery(this);
jQuery(window).scroll(function() {
// HTML5 proves useful for helping with creating JS functions!
// also, negative value because we're scrolling upwards
var yPos = -($window.scrollTop() / $scroll.data('speed'));
// background position
var coords = '50% '+ yPos + 'px';
// move the background
$scroll.css({ backgroundPosition: coords });
}); // end window scroll
}); // end section function
}); // close out script
/* Create HTML5 element for IE */
document.createElement("section");
我不确定它的图像(虽然我们已经试过几次)或者代码不正确。这不是第一次使用视差的体验,它通常很简单所以我有点困惑
感谢您的帮助
答案 0 :(得分:0)
我不得不改变
background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;
到
background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) fixed;
background-position: center top!important;