javascript - jQuery - 在垂直鼠标滚动时水平动态移动元素 - 滚动方法不适用于自定义变量

Question

我的目标是让 .horizo​​ntal-slide 元素在父元素 (.horizo​​ntal-slide-wrapper) 滚动到 View 中时从左向右水平移动，就像这样:http://jsfiddle.net/PvVdq/ .

我使用上面的代码片段作为我的代码的基础。我遇到的问题是，当 scroll() 方法应用于 $(window) 时会发生所需的水平滑动行为，但当 appleid 应用于 $wrapper 或其他自定义变量时不会发生(jQuery 未激活)。

HTML:

<div class="horizontal-slide-wrapper">
  <h1 class="horizontal-slide">Sliding text</h1>
  ...
  content
  ...
</div>

Nb - 父元素位于页面下方相当远的位置并且高度 > 100vh。

CSS:

.horizontal-slide-wrapper {
  position: relative;
}

.horizontal-slide {
  position: fixed;
  top: 0;
  left: 0;
}

jQuery:

$(document).ready(function () {
    var $horizontal = $('.horizontal-slide');
    var $wrapper = $horizontal.parent();

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $wrapper.height();

        scrollPercent = (s / d);

        var position = (scrollPercent * $(document).width());

        $horizontal.css({
            'left': position
        });
    });
});

我只需要让这个滚动方法在 $wrapper 上触发。从那里我应该可以很好地动态调整 CSS 属性“top”。

在此先感谢您的帮助。

Answer 1

Here是我想要的最终效果的示例，当父元素在 View 中时，文本元素在视口(viewport)中水平滑动。

我意识到我实际上想做的只是根据滚动条 s 的位置向 .horizo​​ntal-slide 添加水平偏移。

我已经设法做到这一点，但似乎无法使水平偏移对齐，以便 .horizo​​ntal-slide 与其父级 .horizo​​ntal-slide 同时进入视口(viewport)-wrapper(即 css left: 0)。

似乎我设置为 $wrapperVerticalOffset 的内容并未计算预期的内容，即 .horizo​​ntal-slide-wrapper 与文档顶部之间的距离，当我更改屏幕分辨率或切换进入和退出 Inspector 时，它也不会与 $scrollPosition 保持恒定比例。

这是我更新后的代码:

HTML

<div class="horizontal-slide-wrapper">
  <h1 class="horizontal-slide">Sliding text</h1>
  ...
  content
  ...
</div>

CSS

.horizontal-slide-wrapper {
  position: relative;
}

.horizontal-slide {
  position: fixed;
  top: 0;
  left: -1000;
}

jQuery

$(document).ready(function () {
    var $horizontal = $('.horizontal-slide'),
    $wrapper = $horizontal.parent(),
    $wrapperWidth = $wrapper.width(),    
    $wrapperHeight = $wrapper.height(),
    $wrapperVerticalOffset = $wrapper.offset().top;

    $horizontal.css({
        'left': 0 - $wrapperVerticalOffset
    });    

    $(window).scroll(function () {
        var $scrollPosition = $(this).scrollTop();

        var $leftOffset = (($scrollPosition - $wrapperVerticalOffset) * ($wrapperWidth / $wrapperHeight));

        $horizontal.css({
            'left': $leftOffset            
        });    
    });

});