Show li elements in div while height is less than another div

Question

I have two divs with id=left and id=right . The div with id=left contains some li elements (a list with bullets) and it is floated left. The div with id=right contains some text and html (any type of content). The problem is sometimes the left sided div ( id=left ) is bigger than id=right or vice versa. I want only to show, for example 10 li s on the page and then when user scroll to show another li s on the page while the height of left is less than or equal to the height of right .

A descriptive image of the problem:

EDIT: I can retreive from server a list of 1000 lis and use display: none and on scroll display: block . I don't want to load dinamically from the server the li s.

Width: #left is 250px #right is 750px .

Answer 1

As you mentioned in comments that #left has 250px width and #right has 750px width.You can get that behavior when you apply position: absolute to the #left container.

body, html {
    padding: 0;
    margin: 0;
}
.main {
    position: relative;    /* To contain #left */
}
#left {
    background-color: skyblue;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;          /* top and bottom values are to stretch the #left inside the parent container */
    width: 250px;
}
#right {
    background-color: tomato;
    width: 750px;
    margin-left: 250px;       /* equal to #left's width */
}

Working Fiddle

NOTE: In the fiddle above, I used br tags to break the line. which I used just for fiddle purpose.

Answer 2

Here is the JSFiddle

I have used jquery to dynamcially set the height at time of load. If you are changing the content you need to call setmenuheight function after loading the content if you are going for different pages. I am not sure, how you are going to code the content.

$(document).ready(function(){
    for(var i = 1; i < 100; i++){   
        var menuli = "<li>"+"Menu - " +i+"</li>";
    $("#left ul").append(menuli);
    };

setmenuheight();

});


function setmenuheight(){

      $("#left").height($(".content").height()+"px");

}

Answer 3

You can do something like this with a little bit of jQuery:

HTML

<div id="left">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    ...
  </ul>
</div>
<div id="right">
   lorem ipsum ...
</div>

CSS

#left{
    width: 250px;
    float:left;
    overflow-y: hidden;
}
#right{
    margin-top: 10px;
    width: 750px;
    float: right;
}

jQuery

var $right = $('#right'), var $left = $('#left');

if($right.height()<$left.height()){
    $left.height($right.height());
}

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

Fiddles

css only: http://jsfiddle.net/tomsarduy/88eag6e7/2/
jquery: http://jsfiddle.net/tomsarduy/88eag6e7/1/

Answer 4

Jquery:

$(document).ready(function() {
    $("#left").height( $("#right").height() );  

    $(window).scroll( function(){
        if($(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight) {

        } else {
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':1},500);

                }

            });
        }

    });

});

HTML:

<div id="left">
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
</div>
<div id="right">
Your text here
</div>

CSS:

#left
{
    height:auto; 
    width: 250px;
    float: left;
    overflow: hidden;
    display: block;
}
#right {
    float: right;
    width: 200px;
}
#left li
{ 
    margin:10px; 
    padding:50px; 
    background-color:lightgreen; 
}
.hideme
{
    opacity:0;
}

Check JS Fiddle here: http://jsfiddle.net/e5qaD/4000/