jquery - 视差滚动部分的高度不固定/100%？

Question

我一直在使用一些JavaScript，它们已经实现了我想要的视差滚动。直到现在我才在 22 英寸 iMac 上看到它，并且我知道它的像素高度将成为一个问题，尤其是对于该网站的风格而言。

HTML 使用 CSS 部分:

.pages {
min-height: 1050px;
height: 1050px;
margin: 0 auto;
width: 100%;
min-width: 1024px;
position: relative;
}

脚本:

$(document).ready(function(){
    // Cache the Window object
    $window = $(window);

   $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object

      $(window).scroll(function() {

        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';


        $bgobj.css({ 
     backgroundPosition: coords,
     '-webkit-background-size': 'cover',
     '-moz-background-size': 'cover',
     '-o-background-size': 'cover',
     'background-size': 'cover'

             });

}); // window scroll Ends

 });    

}); 

/* 
 * Create HTML5 elements for IE's sake
 */

document.createElement("article");
document.createElement("section");

因此，如果有人可以帮助我解决这两个问题/其中一个问题:

1. 如何使某个部分的高度达到用户屏幕的 100%？简单地将高度和最小高度更改为 100% 并不能做到这一点 - 部分“消失”。

2. 是否可以更改此脚本，以便从图像的中心(高度)而不是从左上角重新调整图像的大小？

Answer 1

1. 我使用 jquery 构建了一个视差网站，发现这两个变量在我的代码中弹出:

   var height = $(window).height();
   var depth = $(window).scrollTop();
   

   您可以使用这些来确定最终用户屏幕的高度以及他们当前在页面上向下滚动的距离。第一个名为 height 的变量应该可以解决问题。 scrollTop() 将为您提供当前屏幕顶部到整个页面顶部的像素位置。

2. 不，您无法从图像中心调整图像大小，但这不应该是一个大问题，只是需要更多的时间和计算