jquery - 使用jquery在固定的div元素内滚动

Question

我有一个固定位置的侧边栏，里面有一些带有溢出的容器：auto，所以它们可以与正文分开滚动，我想做的是在正文滚动时滚动元素 .left。

我可以让它以相反的方式工作，即 .left 被滚动并且身体在滚动时移动（参见 jsfiddle）。

$(function(){

    $('.left').scroll(function(){
        $('body').scrollTop($(this).scrollTop());    
    })

});

http://jsfiddle.net/g8Krz/403/

我想要实现的是当 body 滚动时， .left 也向下滚动。

Answer 1

干得好：

$(function () {

    $('.left').scroll(function () {
        $(window).scrollTop($(this).scrollTop());
    });

    $(window).scroll(function () {
        $('.left').scrollTop($(this).scrollTop());
    })

});

http://jsfiddle.net/g8Krz/404/

如果你愿意，你也可以滚动到相同百分比的高度而不是绝对值scrollTop()。

编辑

这是百分比滚动实现。不是最好的，但它可以工作并向您展示总体思路。

$(function(){

    var $window = $(window);
    var $body = $('body');
    var $left = $('.left');

    var windowScrollHeight = $body.get(0).scrollHeight;
    var leftScrollHeight= $left.get(0).scrollHeight;

    $(window).scroll(function(){
        var windowScrollTop = $window.scrollTop();
        var relativeScroll = windowScrollTop / windowScrollHeight;
        var leftScrollTop = relativeScroll * leftScrollHeight;

        $left.scrollTop(leftScrollTop);
    });

});

http://jsfiddle.net/N3GR8/1/