[英]jQuery - Parallax Effect - Change Background Position to “Center Center”
我已经在我的网站中实现了以下 jQuery 视差效果(取自http://www.brandaiddesignco.com/insights/parallax-scrolling-made-easy/ ):
var top_header = '';
$(document).ready(function(){
top_header = $('.header-container');
});
$(window).scroll(function () {
var st = $(window).scrollTop();
top_header.css({'background-position':"center "+(st*.5)+"px"});
});
它工作得很好,我需要做的只是将它应用到包含背景的类。 但是,背景图像的起始位置是顶部中心,我想将其更改为中心中心。 我尝试将代码更改为以下内容,这使插件停止工作:
top_header.css({'background-position':"center center"+(st*.5)+"px"});
有什么建议?
谢谢!
想通了……让它与 CSS calc() 一起工作:
$(document).ready(function(){
var top_header = $('.header-container');
top_header.css({'background-position':'center center'}); // better use CSS
$(window).scroll(function () {
var st = $(this).scrollTop();
top_header.css({'background-position':'center calc(50% + '+(st*.5)+'px)'});
});
});
http://codepen.io/anon/pen/qEgQzK?editors=001
原始答案已编辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.