html - Foundation 6 粘性布局在移动设备中损坏

Question

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

屏幕截图 Foundation 6 Sticky layout broken in mobile

$(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>