[英]Header Section Parallax Scroll Effect jQuery And Vertical Center Margin
我有一个带有背景图片的标头部分,一个带有徽标的元素。
现在,此徽标以jQuery居中。
当我尝试向徽标添加视差效果时,它不再居中,因为我还对视差使用了边距更改。
这是我的代码,我还添加了JS Fiddle Link(视差效果在iframe编辑器中不起作用,因此您必须在新窗口中打开示例。
码:
// Viewport Height for head section
function viewport_height() {
var height = $(window).height();
var viewportHeight = (50 * height) / 100;
var viewportHeightInner = (50 * height) / 150;
var viewportHeightInnerMargin = (50 * height) / 300;
viewportHeight = parseInt(viewportHeight) + 'px';
viewportHeightInnerMargin = parseInt('-' + viewportHeightInnerMargin) + 'px';
$(".head").css('height',viewportHeight);
$(".head .background").css('height',viewportHeight);
$(".head .inner").css('height',viewportHeightInner);
$(".head .inner").css('width',viewportHeightInner);
$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);
}
// Resize head section on scale
$(document).ready(function() {
viewport_height();
$(window).bind('resize', viewport_height);
});
// Logo Parallax scroll
$(window).scroll(function(e){
if ($(window).width() > 800) {
$('.head .inner').css({
'margin-top' : +($(this).scrollTop()/2)+"px",
});
}
});
而不是使用负边距将绿色框居中,请尝试使用以下居中方法:
section.head .inner {
position: relative;
top: 50%;
left: 50%;
background-color: green;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
您必须编辑JS才能删除负边距。 只需删除这些行:
$(".head .inner").css('margin-top',viewportHeightInnerMargin);
$(".head .inner").css('margin-left',viewportHeightInnerMargin);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.