Question

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

屏幕截图 Foundation 6 Sticky layout broken in mobile

＆＃13;

$(document).foundation();

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

$(document).foundation();

＆＃13;

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

＆＃13;

基础6在移动设备中打破粘性布局

1 个答案: