[英]Show li elements in div while height is less than another div
I have two divs with id=left
and id=right
. 我有两个id=left
和id=right
div。 The div with id=left
contains some li
elements (a list with bullets) and it is floated left. id=left
的div包含一些li
元素(带有项目符号的列表)并且它向左浮动。 The div with id=right
contains some text and html (any type of content). id=right
的div包含一些文本和html(任何类型的内容)。 The problem is sometimes the left sided div ( id=left
) is bigger than id=right
or vice versa. 问题是有时左侧div( id=left
)大于id=right
或反之亦然。 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
. 我只想显示,例如页面上的10 li
,然后当用户滚动显示页面上的另一个li
时, left
的高度小于或等于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
. 编辑:我可以从服务器检索1000 lis的列表并使用display:none和滚动display: block
。 I don't want to load dinamically from the server the li
s. 我不想从服务器上加载dinamically li
秒。
Width: #left is 250px
#right is 750px
. 宽度:#left是250px
#right是750px
。
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. 正如您在评论中提到的那样#left
宽度为250px
而#right
宽度为750px
当您将position: absolute
应用于#left
容器时,您可以获得该行为。
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 */
}
NOTE: In the fiddle above, I used br
tags to break the line. 注意:在上面的小提琴中,我使用br
标签来打破这条线。 which I used just for fiddle purpose. 我只是用于小提琴的目的。
Here is the JSFiddle 这是JSFiddle
I have used jquery to dynamcially set the height at time of load. 我已经使用jquery来动态地设置加载时的高度。 If you are changing the content you need to call setmenuheight function after loading the content if you are going for different pages. 如果要更改内容,则在加载内容后,如果要使用不同的页面,则需要调用setmenuheight函数。 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");
}
You can do something like this with a little bit of jQuery: 你可以用一点点jQuery做这样的事情:
<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>
#left{
width: 250px;
float:left;
overflow-y: hidden;
}
#right{
margin-top: 10px;
width: 750px;
float: right;
}
var $right = $('#right'), var $left = $('#left');
if($right.height()<$left.height()){
$left.height($right.height());
}
$(window).on('scroll', function () {
$('#left').scrollTop($(this).scrollTop());
});
css only: http://jsfiddle.net/tomsarduy/88eag6e7/2/ 仅限CSS: http : //jsfiddle.net/tomsarduy/88eag6e7/2/
jquery: http://jsfiddle.net/tomsarduy/88eag6e7/1/ jquery: http : //jsfiddle.net/tomsarduy/88eag6e7/1/
Jquery: 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: 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: 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/ 在这里查看JS Fiddle: http : //jsfiddle.net/e5qaD/4000/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.