2个不同高度的DIV在滚动时达到顶部和底部相同的时间

时间:2014-07-07 03:51:43

标签: javascript jquery css

我有2个DIV,它们总是不同的高度,因为内容会根据页面而变化。我希望这两个不同高度的DIV在滚动时同时到达页面的顶部和底部。

这是我正在努力实现的一个工作示例 - http://jsfiddle.net/eBk5f/

问题是,当CONTENT DIV的内容少于CONTENT-SIDEBAR DIV并且没有延伸到页面下方时,滚动条会消失,功能也会丢失。

问题示例 - http://jsfiddle.net/nESaT/

如果DIV中的内容高度如何,我如何保留工作示例的功能?

编辑:使用BODY CSS更新的工作示例脚本 - http://jsfiddle.net/TAyXD/

SCRIPT:

$(document).ready(function(){
var doc = $(window);
$(window).bind('resize', function() {
    $("#content-sidebar").css('top', (calculateScrollSpeed()));
});

$(window).bind('scroll', function() {
    $("#content-sidebar").css('top', (calculateScrollSpeed()));
});

function calculateScrollSpeed() {
    var leftPaneHeight = $('#content').height();
    var rightPaneHeight = $('#content-sidebar').height();
    var browserHeight = $(window).height();
    var leftPaneScrollTop = $(window).scrollTop();
    console.log((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
    return -$(window).scrollTop() * ((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight));
}
}); 

2 个答案:

答案 0 :(得分:2)

这是一个有效的解决方案!

jQuery:

$(document).ready(function () {
    var contentHeight = $('#content').height();
    var sidebarHeight = $('#content-sidebar').height();
    function setup(leftPaneHeight, rightPaneHeight) {
        if (leftPaneHeight > rightPaneHeight) {
            $("#content-sidebar").css('position', 'fixed');
        } else {
            $("#content").css('position', 'fixed');
        }
    }
    function calculate(leftPaneHeight, rightPaneHeight) {
        var browserHeight = $(window).height();
        var scrollerPosition = $(window).scrollTop();
        if (leftPaneHeight > rightPaneHeight) {
            var result = (-scrollerPosition * ((browserHeight - rightPaneHeight) / (browserHeight - leftPaneHeight)));
            return $("#content-sidebar").css('top', result + 'px');
        } else {
            var result = (-scrollerPosition * ((browserHeight - leftPaneHeight) / (browserHeight - rightPaneHeight)));
            return $("#content").css('top', result + 'px');
        }
    }
    $(window).bind('resize', function () {
        calculate(contentHeight, sidebarHeight);
    });
    $(window).bind('scroll', function () {
        calculate(contentHeight, sidebarHeight);
    });
    setup(contentHeight, sidebarHeight);
});

CSS:

#content {
    float: left;
    position: relative;
    width: 400px;
}
#content-sidebar {
    float: left;
    position: relative;
    margin-left: 400px;
    width: 400px;
}

我希望代码不言自明。

答案 1 :(得分:0)

这里出现的问题是#content-sidebar将其位置设置为固定,这意味着它已从文档布局中删除。

这意味着#content-sidebar中的内容实际上并不会影响body的高度。虽然body中的内容未填充body的高度,但窗口不会滚动。

为了缓解此问题,您只需计算#content-sidebar的高度,并将+的偏移高度设置为屏幕顶部(如果您决定将其从顶部)并将其设置为正文的高度,如果高于窗口的高度,将返回您已实现的溢出和滚动功能。

这样的事情会做:

if($('#content-sidebar').height() > $('#content').height()) {
    $('body').css('height',$('#content-sidebar').offset().top+$('#content-sidebar').height());
}

示例