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

Question

我按照教程 (code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--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/jorislaarman.html

完整的图片在这里：

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

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

---

我遇到的第二个问题是我的图片在 div 中的位置。图片非常大，我将它们调整为大约 1900 像素宽。但我仍然有一个问题，他们不在正确的地方。

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

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

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

我在这里尝试了解决方案：Is it really impossible to make a div fit its size to its content?

但似乎没有一个工作......：/

我还尝试了不同的“背景尺寸”属性（封面、包含...），但我不想丢失图片的整个页面宽度。

这是一个包含我所有代码的 JSfiddle：http://jsfiddle.net/79D2J/

Answer 1

你需要减去offset.top

类似这样的：

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