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恢复到视图中，但我不应该这样做：0应该使div位于视图的顶部。发生了什么？

Answer 1

所以我只是通过使用此css将所有内容包装在div（正文标签下方）中来修复它

position:relative;
min-height: 100%;

任何人都知道为什么要修复它？

固定div在iOS和＆amp ;; Android的

1 个答案: