[英]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.