jquery фиксирует боковую панель при прокрутке до нижнего края

Этот код взят с waypointarts.com и предполагает создание фиксации боковой панели при прокрутке до самого низа. проблема заключается в том, что когда правый div заполняется высотой левого div, даже если установлено значение 100 #, он остается фиксированным на определенной высоте, окне/экране или чем-то еще. как я могу установить его так, чтобы его высота составляла 100% или эквивалентна высоте правого div.

HTML-заголовок

<div id="wrapper">

  <div id="left">

    <div id="sidebar">

      Sidebar Content

    </div>

  </div>

  <div id="right">

    This is the text of the main part of the page.

  </div>

  <div class="clear"></div>

</div>

<div id="footer">Footer</div>

CSS

#header {
  background: #c2c2c2;
  height: 50px
}

#wrapper {
  width: 500px
}

#left {
  background: #d7d7d7;
  position: absolute; /* IMPORTANT! */
  width: 150px;
  height: 100%
}

#right {
  position: relative;
  width: 350px;
  float: right
}

#sidebar {
  background: #0096d7;
  width: 150px;
  color: #fff
}

.clear {
  clear: both
}

#footer {
  background: #c2c2c2
}

ЯВАСКРИПТ

$(document).ready(function () {

    var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

    $(window).scroll(function () {

        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if (scroll < $('#left').offset().top) {

            $('#sidebar').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#sidebar').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#sidebar').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });
        }
    });
});

Изображение с сайта waypoitsarts.com:

Изображение с сайта waypoitsarts.com


scroll sidebar jquery fixed
person Francis Chibaye    schedule 30.01.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я думаю, что ваш скрипт работает нормально, возможно, проблема в вашем CSS. Чтобы правильно содержать элемент position:absolute;, вы должны установить для его родительского элемента ('#wrapper') значение position:relative.

Посмотрите демонстрацию этого jsfiddle: jsfiddle.net/J62Cp/

person Mark S    schedule 30.01.2014

arrow_upward
2
arrow_downward

У меня похожая установка. Мне нужен был «липкий» div, который начинался в верхней части раздела контента (на 300 пикселей ниже верхней части страницы из-за заголовка), был исправлен, пока я прокручивал вниз, но останавливался, когда я добирался до определенной точки (нижний колонтитул ). При использовании чистого CSS липкий элемент div располагался за моим нижним колонтитулом после того, как я добрался до конца. Ваш код заставил меня двигаться в правильном направлении, но вот изменения, которые я сделал для своего варианта использования:

$(document).ready(function () {
    var length = $("#left").height() - $("#sidebar").height();

    $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if(scroll <= 0) {
            $("#sidebar").css({
                'position': 'absolute',
                'top': '0'
            });
        } else if(scroll >= length) {
            $("#sidebar").css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });
        } else {
            $("#sidebar").css({
                'position': 'fixed',
                'top': '300px'
            });
        }
    });
});
person UTAlan    schedule 11.03.2014

arrow_upward
1
arrow_downward

Вы хотите боковую панель с фиксированным положением или боковую панель с высотой = основной части контента???? если вы хотите, чтобы высота боковой панели равнялась основной части контента, это может вам помочь.

$(function(){
   var mainHeight = $('.right').height();
      $('.left').css({
         'height':mainHeight
      });
});
person Raajen    schedule 30.01.2014