标题部分视差滚动效果jQuery和垂直中心边距答案

【问题标题】：Header Section Parallax Scroll Effect jQuery And Vertical Center Margin标题部分视差滚动效果jQuery和垂直中心边距
【发布时间】：2014-10-13 03:46:53
【问题描述】：

我有一个带有背景图像的标题部分和一个带有徽标的元素。
现在这个标志以 jQuery 为中心，位于该部分的中间。
当我尝试为徽标添加视差效果时，它不再居中，因为我还为视差使用了边距变化。

这是我的代码，我还添加了一个 JS Fiddle 链接（视差效果在编辑器 iframe 中不起作用，因此您必须在新窗口中打开示例。

JS Fiddle Editor
JS Fiddle Show

代码：

// 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",
        });
    }
});

【问题讨论】：

标签： jquery html css margin parallax

【解决方案1】：

不要将具有负边距的绿色框居中，而是尝试以下居中方法：

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);

【讨论】：