Question

我想重现这个（完美地工作）：

但我不希望它适用于document.height，只能在我的div高度上。

这是我的脚本

if(positionYDiapo<=middleHeight){

        $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'}).addClass('stuck').removeClass('anchored');


            if(bottomDiapo<=bottomFrame){
                $('#frame').css({ 'position': 'absolute' });
                $('#frame').css({ 'bottom': '0px' });
                $('#frame').css({ 'top': 'auto' });
                $('#frame').removeClass('stuck').addClass('anchored');
            }

            var $horizontal = $('#frame');

            var s = $(this).scrollTop(),
                d = $(document).height(),
                c = $(this).height();

            scrollPercent = (s / (d - c));

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

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


       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           // downscroll code
           console.log('down');
       } else {
          // upscroll code

          if((bottomFrame)-hauteurDiv>=middleHeight){
             console.log('up');
             $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'}).addClass('stuck').removeClass('anchored');

           }
       }
       lastScrollTop = st;  


    }else{
        console.log('no code here');
        $('#frame').css({position:'absolute', top:'0px', bottom:'auto'}).removeClass('stuck').removeClass('anchored');
    }

另外，我需要跟踪动作停止时的左侧位置

Answer 1

好吧，您需要将首次引用该文档的所有内容更改为您希望应用滚动的div。

JavaScript有两个非常方便的函数来确定宽度和长度：

你可以通过改变你的函数在jQuery中实现这些函数：

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $('#test').scroll(function () {
        var s = $(this).scrollTop(),
            d = $('#test').get(0).scrollHeight,
            c = $('#test').get(0).scrollWidth,

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * (c - 2*$horizontal.width()));

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

（我没有检查计算是否绝对正确，所以你可能想要研究一下）

使用相应的HTML结构：

<div id="test">

// put your content here

</div>

<div id="horizontal">scrolling div</div>

您可以找到该代码in this jsFiddle的实现。

我希望能让你开始。祝你好运！

在另一个div中水平滚动div

1 个答案: