Divприкрепить к низу когда его нижняя граници достигнет нижней части экрана [Архив форума]

Просмотр полной версии : Divприкрепить к низу когда его нижняя граници достигнет нижней части экрана

runyugin

20.01.2015, 19:39

На Экране два длинных div расположенных слева и справа.
Они имеют разную длину из-за содержащего контента.
Задачи при с скролинге вниз в момент когда более короткий Div достигнет нижней части экрана прикрепить его к низу а второй продолжает скролиться до своего окончания.

runyugin

20.01.2015, 20:00

Вот схема как должно работать

danik.js

21.01.2015, 01:05

Слушаешь событие scroll у document, когда document.body.scrollTop оказывается больше, чем block.offsetTop + block.offsetHeight, меняешь его css свойства: position:fixed, bottom:0.
Можно иначе определелять положение блока относительно viewport:

block.getBoundingClientRect.bottom > 0.
А scrollTop в разных браузерах должен быть разный. Хотя можно заменить на window.scrollY - работает почти везде.

runyugin

21.01.2015, 09:15

Пока не срабатывает

<style>

.fixed {
position: fixed;
bottom: 10px; /*здесь указываем отступ сверху*/
left:510px;
z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}
</style>

<div class="wrapper clearfix">

<div class="coln-left">

</div>





<div class="content">

</div>


</div>

<script>//<![CDATA[
$(function(){
var topPos = $('.content').offsetTop() + $('.content').height(); //topPos - это значение от верха блока до окна браузера
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < topPos) $('.floating').addClass('fixed');
else $('.floating').removeClass('fixed');
});
});
//]]></script>

рони

21.01.2015, 10:42

floating'
и где ?

danik.js

21.01.2015, 10:42

Ошибся чутка. Нужно сравнивать не scrollTop, а scrollTop + window.innerHeight - то есть нижняя видимая ордината документа.
topPos - это значение от верха блока до окна браузера
Нет, это значение от начала документа до низа блока.

рони

21.01.2015, 10:53

runyugin,
:-?
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>

.content.fixed {
position: fixed;
bottom: 10px; /*здесь указываем отступ сверху*/
left:510px;
z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}

.coln-left{
position: absolute;
left: 0px;
width: 100px;
height: 1500px;
background: #009933;
border-bottom: #CC33CC 5px solid;
}
.content{
position: absolute;
left: 510px;
width: 100px;
height: 1200px;
background: #3399FF;
border-bottom: #CC33CC 5px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var topPos = $('.content').offset().top + $('.content').height(); //topPos - это значение от верха блока до окна браузера
$(window).scroll(function() {
var top = $(this).scrollTop()+ $(this).height();
if (top > topPos) $('.content').addClass('fixed');
else $('.content').removeClass('fixed');
});

});

</script>
</head>

<body>

<div class="wrapper clearfix">

<div class="coln-left">

</div>





<div class="content">

</div>


</div>

</body>

</html>

рони

21.01.2015, 10:56

offsetTop()
???