iOS和Android上滚动时固定的div移动了怎么办？

Question

我在移动设备上遇到了一个奇怪的问题，固定位置的div无法滚动。

以下是标记...

<div class="col-sm-6 hidden-md hidden-lg mobile-cart-wrapper" id="mobile-cart-wrapper">
     <div class="mobile-cart" id="mobile-cart">
           {exp:store:product entry_id="{entry_id}" return="account/cart"}
                <div class="add-to-cart">
                    <button class="btn btn-white full-width" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>ADD</button>
                </div>
                <div class="text-center item-qty">
                    <label>
                      Qty <input type="number" name="item_qty" value="">
                    </label>
                </div>
                <div>
                    {if country_seg == 'ca'}
                        <input type="hidden" name="price" value="{{country_seg}_product_price}">
                        <span class="cost">{{country_seg}_product_price}</span>
                    {if:else}
                        <span class="cost">{price}</span>
                    {/if}
                </div>
            {/exp:store:product}
    </div>

我在这里使用了一些Bootstrap类，仅在小屏幕大小或更低的情况下显示此块。此外，我使用了一些自定义CSS和JS，使得该块在接近屏幕顶部时滚动到固定位置。

以下是JS代码...

    var viewport = $(window);
    var cart = $('.mobile-cart');
    var cartTop = cart.offset().top;
    $(window).scroll($.throttle(75, floatingAddToCart));
    $(window).resize($.throttle(75, floatingAddToCart));

    function floatingAddToCart () {
        viewport = $(window);
        cart = $('.mobile-cart');
        var left_offset = cart.position().left;
        var width = $(window).width();

        if(viewport.scrollTop() > cartTop){
            cart.addClass('fixed-cart');
            cart.css('margin-left', '-' + left_offset + 'px');
            cart.css('width', width + 'px');
        } else {
            cart.removeClass('fixed-cart');
            cart.css({'margin-left': 0, 'width': ''});
        }
    }

以下是CSS样式表的内容...

    .fixed-cart {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 99999;
    }

Android 滚动固定效果在前几百个像素的滚动中运作良好，但是当它达到一定程度时，固定的 div 就会跟随页面上的其余内容向上滚动。

iOS 滚动固定效果可以工作，但是当用户滚动时，固定的 div 慢慢地开始向上滑动，直到消失。

如果我在使用设备测试时，在 Chrome 中进行调试并将顶部位置设置为某个正整数，通常可以将 div 恢复到视图中，但我不应该这样做，因为 top: 0 应该将 div 放在视图的顶部。发生了什么？？

- Panda4Man

---

你有收到任何控制台错误吗？ - Greg

@Greg 没有，没有错误... - Panda4Man

Answer 1

所以我刚刚通过在所有内容的外部包装一个div（就在body标签下方）并使用此css来修复它。

position:relative;
min-height: 100%;

有人知道这个是如何解决的吗？

- Panda4Man