Исправление аффикса Bootstrap к ближайшей стоячей колонке

Благодарю, если вы можете мне помочь. У меня есть несколько строк начальной загрузки, и одна из них содержит 2 столбца - левый для прокручиваемого текста и правый для описания, закрепленного аффиксом. Правый столбец должен отображаться, когда я прокручиваю вниз до верхней части левого столбца, и скрываться, когда левый столбец заканчивается. Я пытался сделать так, чтобы это работало, но не вышло. Теперь аффикс привязан к телу (а не к верхней и нижней границам родительского блока, как я хотел). Что я делаю неправильно? (кроме того, что я говорю по-английски :) )

индекс.html:

...
<body data-spy="scroll">
...
    <div class="chapter">
        <div class="row" data-target="#myScrollSpy">
            <div class="col-md-5" >
                my precious scrollable text
            </div>
            <div class="col-md-6" id="myScrollSpy">
               <div id="myAffix">
                   my not so good working affix
               </div>
            </div>
       </div>
   </div>
...
    <script>
    $('#myAffix').affix({
              offset: {
                top: 100,
                bottom: 100
              }
            });
    </script>
...
</body>

стиль.css:

body {
    position: relative;
}

.affix {
    top: 150px;
  width: 80%;
}

@media (min-width: 1200px) {
  .affix {
  }         
}

.affix-bottom {
  position: absolute;
}

@media (min-width: 1200px) {
  .affix-bottom {
  }
}

twitter-bootstrap scrollspy affix
person crcerror    schedule 26.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

ну, получается, что лучше забыть об аффиксе и использовать stickyfill - https://github.com/wilddeer/stickyfill

person crcerror    schedule 26.10.2016