Fixed div moving on scroll in iOS & Android

I've got a weird bug happening with a fixed position div scrolling on mobile devices.

Here's the markup...

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

I am using some bootstrap classes here to only show this block if we are in a small screen size or lower. Also, I am using some custom CSS and JS to make this block scroll to fixed once it gets near the top of the screen.

Here is the 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': ''});
        }
    }

And here is the CSS...

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

Android The scroll to fix works just fine for the first few hundred pixels of scrolling but then it hits a certain point and then fixed div just scrolls up the page with the rest of the content.

iOS The scroll to fix works but as the user scrolls the fixed div slowly starts to slide up the page until it's out of site.

If I go into web inspector when debugging in Chrome using the device testing, and set the top position to some positive integer I can usually get the div back into view, but I shouldn't have to do this as top: 0 should make the div at the top of the view. What's going on??

Answers:

Answer

So I just fixed it by wrapping all my content inside of a div (just below the body tag) with this css

position:relative;
min-height: 100%;

Anyone know why this fixed it?

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.