Столбец Sticky Bootstrap должен заканчиваться родителем / содержимым - PullRequest
Новая
       35

Столбец Sticky Bootstrap должен заканчиваться родителем / содержимым

0 голосов
/ 28 мая 2018

Я видел различные формы этой проблемы, но ничто действительно не помогло мне решить поведение частично прилипающей боковой панели / столбца Bootstrap.Позвольте мне начать с самой проблемы.

В верхней части моей страницы есть большое изображение.Из-за сложности страницы я использую сетку столбцов Bootstrap.Изображение охватывает, скажем, 10 столбцов, и я оставил 2, принадлежащие одному и тому же ряду, на левой стороне для хранения боковой панели.Это также позволяет мне выровнять боковую панель по вертикали рядом с изображением.

Теперь боковая панель, которая сейчас является столбцом Bootstrap, должна оставаться липкой и должна оставаться вертикально выровненной по окну просмотра после прохождения полосы прокрутки.Вы можете увидеть в fiddle , что он как бы «скачет» вместо плавного перехода.

Другая проблема заключается в том, что липкий элемент / столбец должен оставаться липким, пока его родитель /Контейнер виден.Это означает, что он должен переходить / быть относительно конца этого контейнера.Прямо сейчас мне удалось сохранить его только до конца страницы.Он должен остановиться над красной линией (изображенной на скрипке).

Вот моя логика jQuery. 

$(document).ready(function(){
  $(window).scroll(function(){
    var elem = $("#refScroller").offset().top - ($("#refScroller").height() / 2);
    var windowvalue = $(window).scrollTop();

    if (elem <= windowvalue) {
      $("#wannabeSticky").addClass("sticky");
    }
    else {
      $("#wannabeSticky").removeClass("sticky");
    }
  });
});

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

Заранее спасибо!

РЕДАКТИРОВАТЬ: я знаю, что уже есть подобная проблема здесь , но, похоже, я не могу заставить логику JS работать для моего случая.

1 Ответ

0 голосов
/ 30 мая 2018

Итак, потратив на это еще один день, я, кажется, достиг достойной версии jQuery, которая выполняет свою работу.Вот мой обновленный fiddle . 

$(document).ready(function(){
  var passedMobileNavi = false;

  function stickySocialNavi(reference, valueExtracted) {
    var refTop = $(reference).offset().top - valueExtracted;
    var scrollTop = $(window).scrollTop();
    return (refTop <= scrollTop);
  }

  $(window).scroll(function() {
    if (stickySocialNavi($("#refScroller"), $("#refScroller").height())) {
      if (!passedMobileNavi) {
        passedMobileNavi = true;
        $("#wannabeSticky").addClass("sticky");
      }
    }
    else {
      passedMobileNavi = false;
      $("#wannabeSticky").removeClass("sticky");
    }

    if (stickySocialNavi($("#end"), $(window).height())) {
      var var1 = $(window).scrollTop(),
      var2 = $("#end").offset().top,
      var3 = $(window).height();
      var calculateOffset = (var2 - var3) - var1;
      $("#wannabeSticky").css("top", "calc(50% + " + calculateOffset + "px)");
    }
    else {
      $("#wannabeSticky").css("top", "50%");
    }
  });
});

Для того, чтобы залипать, чтобы начать, я взял контрольную точку (которая является неподвижным элементом рядом с ним) и ее высоту,Липкий элемент получает фиксированное положение, пока полоса прокрутки проходит мимо центра контрольной точки.

Поскольку элемент ручки центрирован, он получает дополнительные значения верхнего смещения, когда достигается конец его контейнера.Это все еще фиксировано, но значение его верхнего свойства принимает разницу прокрутки, таким образом медленно изображая это к концу контейнера.

Я не знаю, является ли это самым изящным, прямым или простым в реализации/ понять решение, но у меня это сработало.

...