Question

感谢您能否帮助我。我有几个bootstrap行，其中一个包含2列 - 左侧是可滚动文本，右侧是由affix修复的描述。当我向下滚动到左列顶部时必须显示右列，当左列结束时隐藏。我试图让它以这种方式工作，但它没有成功。现在固定到主体（而不是像我想要的那样固定在父块的顶部和底部边框）。我究竟做错了什么？（除了我说英语:)）

的index.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>

的style.css：

body {
    position: relative;
}

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

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

.affix-bottom {
  position: absolute;
}

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

Answer 1

嗯，事实证明，更好的决定是忘记粘贴并使用粘贴填充 - https://github.com/wilddeer/stickyfill

将Bootstrap Affix固定到近列列

1 个答案: