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

所以，如果有人能帮助我解决这两个问题中的任何一个问题：

如何将部分的高度设置为用户屏幕的100％？只需将高度和最小高度更改为100％就不会这样做 - 这些部分会“消失”。
是否可以更改此脚本，以便从图像的中心（高度）重新调整图像大小，而不是从左上角重新调整大小？

Answer 1

我使用jquery构建了一个视差网站，发现这两个变量遍布我的代码：
```
var height = $(window).height();
var depth = $(window).scrollTop();
```
您可以使用它们来确定最终用户屏幕的高度以及它们当前向下滚动到页面的距离。名为height的第一个变量应该可以解决问题。 scrollTop（）将为您提供当前屏幕顶部的像素位置，作为整体页面的顶部。
不，你不能从它的中心调整图像大小，但这不应该是一个大问题，它只需要更多的时间和计算

Answer 2

您的代码上的更多信息也不错。

但你必须在（文件）.ready上运行类似的东西事件：
```
var windowHeight = $(window).height();
$('.pages').height.css('height', windowHeight)
```
如果它有响应，我建议也在调整大小事件上运行它。
如果您创建一个jsfiddle或者其他东西，也许我可以帮助你。但我需要看看你的代码。

视差滚动部分在未固定/ 100％高度？

2 个答案: