2列-均滚动(左侧停止其内容) [英] 2 columns - both scroll (left side stops with its content)

问题描述

我有2列的布局.左侧内容短于右侧内容.

我正在尝试一种使页面正常滚动的方法，但是当左侧内容位于页面底部时，我希望它在继续右侧滚动时停止滚动.

这可能吗?还是有可能以固定的高度为左栏完成此操作?

到目前为止，将显示2个滚动条.我的代码示例如下.另外，这是我从中获得灵感的网站: http://www.q107.com/

CSS

  html，正文，* {填充:0;边距:0;}html {宽度:100％;高度:100％;位置:绝对；}#leftShort {高度:自动；height:自动！重要位置:绝对；溢出-y:自动;左:0；最高:0;正确:75％；padding:2em;背景:#eee;}#rightLong {位置:固定；左:25％；最高:0;底部:0;正确:0；溢出-y:自动;padding:2em;背景:#ddd;} 

HTML

 < div id ="leftShort">左侧文字</div>< div id ="rightLong">右侧文字 

解决方案

是的，您可以使用jQuery完成此操作.首先，我认为您需要滚动 window :

  $(window).scroll(function(){var winTop = $(this).scrollTop()，winBottom = winTop + $(this).height()，左= $('#leftShort')，leftBottom = left.height();//当用户到达"#leftShort"的底部时，将其位置固定//以防止其滚动如果(winBottom> = leftBottom){left.css({'position':'fixed'，'底部':'0px'});} 别的 {//当用户向上滚动时，将其位置恢复为相对//与'#rightLong'一起向上移动left.css({'position':'relative'，'底部':'自动'});}}); 

有关此jsfiddle的演示，请参见: jsfiddle.net/d7BPv/

I have a 2 column layout. Left side content is shorter than the right side.

I am trying to achieve a way to have the page scroll normally, but when the left side content is at the bottom of the page I want it to stop scrolling while the right side continues.

Is this possible? Or would it be possible to accomplish this with a fixed height for the left column?

As of now 2 scrollbars appear. An example of my code is below. Also, here is the site I got the idea from: http://www.q107.com/

CSS

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
    position: absolute;
}
#leftShort {
    height:auto;
    height:auto !important;
    position:absolute;
    overflow-y: auto;
    left: 0;
    top: 0;
    right: 75%;
    padding: 2em;
    background: #eee;
}
#rightLong{
    position: fixed;
    left: 25%;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    padding: 2em;
    background: #ddd;
}

HTML

<div id="leftShort">
left side text
</div>


<div id="rightLong">
right side text

解决方案

Yes you can get this done with jQuery. First I think you need to scroll on window:

$(window).scroll(function () {
    var winTop = $(this).scrollTop(),
        winBottom = winTop + $(this).height(),
        left = $('#leftShort'),
        leftBottom = left.height();
    //when the user reached the bottom of '#leftShort' set its position to fixed 
    //to prevent it from moving on scroll 
    if (winBottom >= leftBottom) {
        left.css({
            'position': 'fixed',
            'bottom': '0px'
        });
    } else {
        //when the user scrolls back up revert its position to relative
        // to make it move up together with '#rightLong'
        left.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }

});

See the demo on this jsfiddle: jsfiddle.net/d7BPv/

这篇关于2列-均滚动(左侧停止其内容)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！