Javascript-форум - Divприкрепить к низу когда его нижняя граници достигнет нижней части экрана

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Divприкрепить к низу когда его нижняя граници достигнет нижней части экрана (https://javascript.ru/forum/dom-window/53093-divprikrepit-k-nizu-kogda-ego-nizhnyaya-granici-dostignet-nizhnejj-chasti-ehkrana.html)

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

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

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

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

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

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

<style>

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


<div class="wrapper clearfix">
            <!-- Coln-left -->
			<div class="coln-left">

                        </div>

            <!-- Coln-left #END /-->


			<!-- Content -->

			<div class="content">

                        </div>

			<!-- Content #END /-->
</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>

Цитата:

Сообщение от runyugin

floating'

и где ?

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

Цитата:

Сообщение от runyugin

topPos - это значение от верха блока до окна браузера

Нет, это значение от начала документа до низа блока.

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">
            <!-- Coln-left -->
			<div class="coln-left">

                        </div>

            <!-- Coln-left #END /-->


			<!-- Content -->

			<div class="content">

                        </div>

			<!-- Content #END /-->
</div>

</body>

</html>

Цитата:

Сообщение от runyugin

offsetTop()

???