[英]showing a division dynamically depends on scroll bar position of another divison
I would like to show another div(#footer)
. 我想显示另一个
div(#footer)
。 Whenever I scrolled to the end of a div(#right), have tried like this but it is not working. 每当我滚动到div(#right)的末尾时,都尝试过这样的操作,但是它不起作用。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var bot=$('#right')[0].scrollHeight;
var pos=$("#right")[0].scrollTop +$("#right")[0].clientHeight;
if(bot==pos){
$("#footer").css("display","block");
}
else{$("#footer").css("display","none");
}
});
</script>
<style type="text/css">
#left{
width:10px;
height:100px;
overflow:hidden;
background-color:blue;
}
#right{
width:52px;
height:100px;
overflow:auto;
background-color:green;
position:absolute;
top:7px;left:20px;
}
#footer{
width:70px;height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<div id="footer" style="display:none">
</div>
</body>
</html>
Check out this link... 查看此链接...
How can I use JQuery to check if a div is scrolled all the way to the bottom? 如何使用JQuery检查div是否一直滚动到底部?
For your code just change the javascript to this.... 对于您的代码,只需将javascript更改为此。
$(document).ready(function(){
$('#right').bind('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
$("#footer").show();
}
}
Shown here 如图所示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.