在视差滚动页面中:使div适合内容，并调整位置

Question

我按照教程（代码.tutsplus.com/tutorials/a-simple-parallax-scrolling-technology-net-27641）制作了视差滚动效果，效果很好。

这是我的视差脚本：

$(document).ready(function(){
var $window = $(window); 
$('section[data-type="background"]').each(function(){
var $bgobj = $(this);
    $(window).scroll(function() {
    var yPos = -($window.scrollTop() / $bgobj.data('speed'));
        var coords = '50% '+ yPos + 'px';
        $bgobj.css({ backgroundPosition: coords });
    });
  });
});

我需要在几个显示项目的页面上使用这种效果，所以我直接在HTML中传输了整个CSS属性，而不是为每个页面都有一个CSS文件。

在教程中是这样的：

#home { 
 background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
 height: 1000px; 
 margin: 0 auto; 
 width: 100%; 
 max-width: 1920px; 
 position: relative; 
}

和html（我没有保留"文章"元素，因为我只显示图片）：

<section id="home" data-type="background" data-speed="10" class="pages">     
     <article>I am absolute positioned</article>
</section>   
<section id="about" data-type="background" data-speed="10" class="pages">
     <article>Simple Parallax Scroll</article>
</section>

---

现在我的HTML中有这个：

    <section id="img1" data-type="background" data-speed="19" style="background: url(../../assets/img/projects/product/jorislaarman1.jpg) 0 no-repeat fixed;
    min-height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: absolute background-size : cover;">
    </section>

（我的页面中的每一张图片都有一个^，接下来的部分只有框影效果。

---

我现在遇到两个不同的问题：

首先，我有一些不同大小的图片，因此很多时候内容在滚动效果消失之前几乎看不见。

你可以在第一张图片上看到它：

vincentleroux.fr/projects/product/jorislarman.html

完整的图片在这里：

vincentleroux.fr/assets/img/projects/product/jorislarman1.jpg

我想一个解决方案是将每张图片的大小调整为相同的比例，但这将是一项相当艰巨的工作。我希望有一种方法可以影响div/视差滚动，以避免我的图片隐藏得太快，但我自己无法做到：/。我尝试修改这两个元素（容器和背景）的滚动速度，但我无法实现。

---

我遇到的第二个问题是我的图片在div中的位置。这些图片很大，我会将它们调整为1900px左右宽。但我仍然有一个问题，他们没有完全在正确的地方。

当你加载我提供链接的页面时，你可能会看到我的图片在开始滚动时结结巴巴。我尝试了不同的东西，但我不知道它可能来自哪里。。。

你也可以在这里看到第一张照片：http://vincentleroux.fr/projects/arcade/wolverine.html

这也很好地说明了我的第二个问题，那就是我无法在div中垂直对齐我的图片，这样滚动就不会立即裁剪或隐藏其中有趣的东西。

我在这里尝试了解决方案：是否真的不可能使div的大小与其内容相适应？

但似乎都不起作用…：/

我还尝试了不同的"背景大小"属性（封面、包含…），但我不想失去图片的整页宽度。

以下是我所有代码的一个JSfiddle：http://jsfiddle.net/79D2J/

Answer 1

您需要减去offset.top

类似这样的东西：

var topWin = $(window).scrollTop();
var yPos = -((topWin - $bgobj.offset().top) / $bgobj.data('speed'));