Вопрос по jquery – Остановить плавающий элемент div с боковой панелью в нижнем колонтитуле (почти работает)

6

Я хочу получить его, чтобы последний div на моей боковой панели оставался липким при прокрутке страницы, но останавливался у нижнего колонтитула. У меня это почти работает сонлайн-учебник, но вычисление не работает, когда комментарии disqus загружаются, и он идет только к определенной точке.

Вот рабочая версияhttp://jsfiddle.net/k56yR/1/, но есть ли простой способ сделать что-то вроде вычисления высоты нижнего колонтитула, а затем сказать ему, чтобы он прекратил прокрутку так далеко от нижней части страницы?

Ваш Ответ

1   ответ
16

$('#footer').offset().topначение @ изменяется после загрузки ваших комментариев. Так что вам нужно обновитьfooterTop (а такжеlimit на основании новогоfooterTop value) после загрузки ваших комментариев или при каждом срабатывании события.

что-то типа

$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});

Как и в большинстве случаев, для этого есть плагин jQuery, так как Julianm указал в своем комментарии, доступноВо. Он также поддерживает значение стопора, чтобы остановить склейку в любом желаемом положении.

Спасибо, это уже почти работает. Думал, что это так, но в разных браузерах он игнорирует ограничение и прокручивает нижний колонтитул. Кажется, работает один раз, когда вы либо очищаете кеш, либо обновляете страницу, но не для каждого повторного просмотра. Любые идеи? Вот пример на сайте Thecomeupbmx.net / видео / красный-бык-империя из-грязи-практика-редактирования (это не мое, я просто работаю над этим) Mike Jonas
Мне нужен какой-нибудь тест для этого, который всегда терпит неудачу. Возможно, браузеры кешируют старый js, но я не могу воспроизвести это. 19greg96
Этот плагин jQuery Github.com / AndrewHenderson / jSticky (Я видел это в одном из комментариев предыдущего примера, предоставленного Майком Джонасом) сделал именно то, что искал. Он поддерживает значение ограничителя (может быть классом, идентификатором или даже числовым значением), чтобы остановить поле прикрепления в любом желаемом положении. julianm

Похожие вопросы