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

Тема в разделе "JavaScript", создана пользователем runyugin, 20 янв 2015.

Модераторы: ZiX
  1. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    Div прикрепить к низу когда его нижняя граница достигнет нижней части экрана

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

    Untitled-1.png
     
  2. akkela

    akkela Создатель

    Регистр.:
    17 дек 2014
    Сообщения:
    31
    Симпатии:
    4
    $(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
    });
     
  3. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    Сделал так но пока не срабатывает(


    HTML:
    <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>
    
     
  4. akkela

    akkela Создатель

    Регистр.:
    17 дек 2014
    Сообщения:
    31
    Симпатии:
    4
    $('.content') поиск по классу, получаем массив и не всегда знаем от чего брать height

    стало интересно зачем ещё одна функция сверху одета
     
    Последнее редактирование: 21 янв 2015
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    182
    Это называется sticky elements (липкие элементы). Под JQuery есть различные плагины для таких штук. Например, Sticky-Kit - довольно простой и понятный плагин, сжатая версия занимается всего 2.7 Kb
     
  6. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    Решение найдено

    Код:
    <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>