基础 6 移动中的粘性布局被破坏

Question

我在Foundation 6.4.3上使用Sticky时发现了一个棘手的问题。粘性容器将向下下降页面，并在它和锚点容器之间形成很大的间隙。有人也有这个问题吗？

屏幕截图基础 6 移动版的粘性布局被破坏

$(document).foundation();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
    
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="small-12 large-9 cell" id="sidebar-anchor">
          <div style="height: 900px; background-color: purple; ">
            main column
          </div>
        </div>
        <div class="small-12 large-3 cell">
          <div data-sticky-container>
            <div class="sticky" data-sticky data-margin-top="1" data-sticky-on="large" data-anchor="sidebar-anchor">
              <div style="height: 500px; background-color: yellow; ">
                sidebar
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.0.5/what-input.min.js"></script>
    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
    

Answer 1

你应该尝试在黄色背景div 上position:sticky。

$(document).foundation();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
    
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="small-12 large-9 cell" id="sidebar-anchor">
          <div style="height: 900px; background-color: purple; ">
            main column
          </div>
        </div>
        <div class="small-12 large-3 cell">
          <div data-sticky-container>
            <div class="sticky" data-sticky data-margin-top="1" data-sticky-on="large" data-anchor="sidebar-anchor" style="position:sticky">
              <div style="height: 500px; background-color: yellow; ">
                sidebar
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.0.5/what-input.min.js"></script>
    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>