Question

我的目标是让.horizontal-slide元素在父元素（.horizontal-slide-wrapper）滚动到视图中时从左向右水平移动，就像这样：http://jsfiddle.net/PvVdq/。

我已使用上面的代码段作为我的代码的基础。我遇到的问题是，将scroll（）方法应用于$（window）时会发生所需的水平滑动行为，但是当对$ 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

这是您所追求的吗：jsfiddle modified？

我修改了原始的小提琴。您需要知道的是scrollTop和scrollHeight之间的比率。您可以使用.scrollTop()上的jQuery（$wrapper）访问第一个，但是需要本机javascript对象才能访问scrollTop（因此：$wrapper[0].scrollHeight）。因此，在小提琴中，修改后的代码是：

...
$wrapper.scroll(function () {
  var s = $wrapper.scrollTop(),
  d = $wrapper[0].scrollHeight,
  c = $(this).height();
...

Answer 2

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

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

我设法做到了，但是似乎无法获得水平偏移以对齐，因此.horizontal-slide与它的父级.horizontal-slide-wrapper（即css left: 0）同时进入视口）。

我设置为$wrapperVerticalOffset的对象似乎没有计算预期的对象，即.horizontal-slide-wrapper与文档顶部之间的距离，也没有在$ scrollPosition时保持不变我更改了屏幕分辨率或切换了Inspector。

这是我更新的代码：

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

});

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

2 个答案: