当一个div的高度小于另一个div时，显示其中的li元素。

Question

我有两个带有id=left和id=right属性的div。带有id=left属性的div包含一些带有标记符号的li元素列表，漂浮在左侧。带有id=right属性的div包含一些文本和HTML（任何类型的内容）。问题是，有时左侧的

（id=left）比右侧的

（id=right）大或小。我只想在页面上显示10个 li 元素，然后当用户滚动时，在左侧

的高度小于或等于右侧

的高度时，再显示另外的li元素。

以下是问题的描述图片：

编辑： 我可以从服务器检索1000个

元素，并使用display：none隐藏它们，当滚动时使用display: block显示它们。 我不想动态加载

元素。

宽度：#left为250px，#right为750px。

- MM PP

---

你的代码在哪里？ - Deepak Ingole

谢谢你的评论！我赞同你对该用户名的评价。+1 - Guruprasad J Rao

我只想在左侧div中显示10个li，当用户滚动时，在左侧div中显示另一个li，同时左侧的高度小于或等于右侧的高度。 - MM PP

我可以从服务器检索到一个包含100个“li”的列表，并使用display: none来隐藏它们，在滚动时使用display: block来显示。我不想通过动态加载从服务器加载列表。 - MM PP

#left或#right的宽度是否会动态变化？如果不会，那么它们的宽度至少是以百分比还是已知的固定宽度为基础？ - Mr_Green

Answer 1

根据您在评论中提到的，#left 的宽度为 250px，#right 的宽度为 750px。当您将 #left 容器应用 position: absolute 属性时，就可以实现这种行为。

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 */
}

工作中的演示

注意：在上面的演示中，我使用了br标签来换行，这只是为了演示目的。

- Mr_Green

Answer 2

这里是JSFiddle。

我使用了jQuery在加载时动态设置高度。如果您更改内容，需要在加载内容后调用setmenuheight函数，如果要切换到不同的页面。我不确定您将如何编写内容。

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

}

- Alaksandar Jesus Gene

---

添加或删除Lorem Ipsum文本以查看列表更改。添加或删除后，您需要单击运行。 - Alaksandar Jesus Gene

谢谢你的帮助！+1 - MM PP

Answer 3

你可以通过一点点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：http://jsfiddle.net/tomsarduy/88eag6e7/2/
使用jQuery：http://jsfiddle.net/tomsarduy/88eag6e7/1/

- Tomas Ramirez Sarduy

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

点击此处查看 JS Fiddle: http://jsfiddle.net/e5qaD/4000/

- NETCreator Hosting - WebDesign