У меня есть HTML-страница, когда полоса прокрутки достигает нижней части страницы, мне нужно сдвинуть в div с нижнего правого, содержащего iframe.
Используя JQuery, я применил эффект скольжения для div, содержащего iframe. В настоящее время сдвиг выполняется нажатием кнопки (при событии нажатия кнопки). Как я могу изменить это, так что, когда полоса прокрутки достигает дна, div, содержащий iframe, автоматически переместится.
Код моей HTML-страницы
<style>
.slide {
background-color: #FFFFCC;
border: 1px solid #999999;
height: 900px;
margin: 1em 0;
overflow: hidden;
position: relative;
width: 100%;
}
.slide .inner {
background: #44CC55;
bottom: 0;
/*height: 650px;*/
height: auto;
left: 0;
padding: 6px;
position: absolute;
width: 650px;
border: 1px solid red;
}
</style>
<link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'; return false;" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('#slidemarginleft button').click(function(){
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
});
});
});
</script>
<div id="slidemarginleft" class="slide">
<button>slide it</button>
<div class="inner" style="margin-left: 1300px;"><iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com">
</iframe></div>
</div>