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

[runyugin]

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

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

 

[akkela]

$(window).scroll(function() {

//get div1, div2,window height
div1=$("#myDiv1").height();
div2=$("#myDiv2").height();
win=$(window).height()

//check position
if($(window).scrollTop() + win > div2) {
//set div1, div2 on bottom
} else if ($(window).scrollTop() + win > div1) {
//set div1 on bottom, reset div2
} else{
//reset div1,div2
});

 

[runyugin]

Сделал так но пока не срабатывает(

<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>

 

[akkela]

$('.content') поиск по классу, получаем массив и не всегда знаем от чего брать height

стало интересно зачем ещё одна функция сверху одета

 

[Absolute]

Это называется sticky elements (липкие элементы). Под JQuery есть различные плагины для таких штук. Например, Для просмотра ссылки Войди или Зарегистрируйся - довольно простой и понятный плагин, сжатая версия занимается всего 2.7 Kb

 

[runyugin]

Решение найдено

<script type="text/javascript">
$(function(){
var topPos = $('.content').height(); //topPos - это значение от верха блока до окна браузера
$(window).scroll(function() {
  var top = $(window).scrollTop() + $(window).height();
  var wind = $(window).height(); 
 
  if (top > topPos && topPos > wind ) $('.content').addClass('fixed');
  else $('.content').removeClass('fixed');
});
});
</script>