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

Question

My objective is to have the .horizontal-slide element move horizontally from left to right when the parent element (.horizontal-slide-wrapper) scrolls into view, just like this: http://jsfiddle.net/PvVdq/ .

I have used the code snippet above for the basis of my code. The problem I have is that the desired horizontal sliding behaviour takes place when scroll() method is applied to $(window), but not when appleid to the $wrapper or other custom variables (the jQuery does not activate).

HTML:

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

Nb - the parent element sits quite far down the page and has height > 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
        });
    });
});

I just need to get this scroll method firing on $wrapper. From there I should be fine dynamically adjusting the CSS attribute 'top'.

Thanks in advance for any help.

Answer 1

Is this what you are after: jsfiddle modified ?

I modified the original fiddle. What you need to know is the ratio between scrollTop and scrollHeight . You can access the first one using jQuery ( .scrollTop() ) on the $wrapper , but you need the native javascript object to access scrollTop (so: $wrapper[0].scrollHeight ). So in the fiddle, the modified code is:

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

Answer 2

Here is an example of the final effect I would like, where the text elements slide horizontally across the viewport when the parent element is in view.

I realised that what I am actually trying to do is just add a horizontal offset to .horizontal-slide based on the position of the scrollbar s .

I have managed to do this but cannot seem to get the horizontal offset to line up so that .horizontal-slide enters the viewport at the same time as its parent .horizontal-slide-wrapper (ie css left: 0 ).

It seems that what I have set as $wrapperVerticalOffset is not calculating what was intended ie the distance between the .horizontal-slide-wrapper and the top of the document, nor does it stay in constant ratio with $scrollPosition when I change screen resolution or switch in and out of Inspector.

Here is my updated code:

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

});