2个不同高度的DIV在滚动时同时到达顶部和底部 [英] 2 different height DIVs reach top and bottom same time on scroll

问题描述

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

I have 2 DIVs that will always be a different height because content changes depending on the page. I want these 2 different height DIVs reach top and bottom of the page at the same time on scroll.

这是我要实现的目标的工作示例- http://jsfiddle.net/eBk5f/

Here is a working example of what I'm trying to achieve - http://jsfiddle.net/eBk5f/

问题是，当CONTENT DIV的内容少于CONTENT-SIDEBAR DIV且未在页面下方拉伸时，滚动条消失并且功能丧失.

The problem is, when the CONTENT DIV has less content than the CONTENT-SIDEBAR DIV and doesn't stretch below the page, the scrollbar disappears and the functionality is lost.

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

无论两个DIV中内容的高度如何，如何保持工作示例的功能?

How do I keep the functionality of the working example regardless of the height of content in either DIV?

使用身体CSS更新工作示例脚本- http://jsfiddle.net/TAyXD/

UPDATED WORKING EXAMPLE SCRIPT WITH BODY CSS - http://jsfiddle.net/TAyXD/

脚本:

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

推荐答案

这是一个可行的解决方案！

Here's a working solution!

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

我希望代码是不言自明的.

I hope that the code is self-explanatory.

这篇关于2个不同高度的DIV在滚动时同时到达顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！