Offset Top Not Working In IOS

Question

Here is the complete code http://jsfiddle.net/vinex08/uhm26em1/

jQuery(function ($) {
var distance = $('.c').offset().top,
    $window = $(window);

$window.scroll(function () {
    if ($window.scrollTop() >= distance) {
        $(".b").css({
            position: 'fixed',
            top: '0'
        });
    } else {
        $(".b").css({
            position: 'inherit',
            top: '10'
        });
    }
});
});`

It's working on Chrome and Firefox but when i checked it via iPad AIR and iPhone, the effect executes even before the 'class c' hits the top.

Do you have a _real_ working sample of your code (not in JSFiddle) that behaves the same way? — Ahmad Baktash Hayeri, Oct 21 '15 at 07:01

score 3 · Accepted Answer · edited Aug 14 '17 at 18:44

3

I hope this will help:

jQuery(function ($) {
    var distance = $('.c').offset().top;
    $(window).scroll(function () {
        var wndwTop = $(this).scrollTop();
        if (wndwTop >= distance) {
            $(".b").css({
                position: 'fixed',
                top: '0'
            });
        } else {
            $(".b").css({
                position: 'inherit',
                top: '10'
            });
        }
    });
});

edited Aug 14 '17 at 18:44

allicarn

2,859
2
28
47

answered Oct 26 '15 at 14:15

Abhishek Saini

66
4

1

Can you explain what you did that fixed the issue? Other than adding in a couple of variables, I don't see a difference. – allicarn Aug 14 '17 at 18:47

score 2 · Answer 2 · answered Oct 21 '15 at 10:53

2

Here we have known fix for mobile Safari. Firstly, detect browser; secondly, a little bit change behavior of the 'offset' function:

// mobile Safari reports wrong values on offset()
// http://dev.jquery.com/ticket/6446
if ( /webkit.*mobile/i.test(navigator.userAgent)) {
  (function($) {
      $.fn.offsetOld = $.fn.offset;
      $.fn.offset = function() {
        var result = this.offsetOld();
        result.top -= window.scrollY;
        result.left -= window.scrollX;
        return result;
      };
  })(jQuery);
}

Place this code somewhere after jquery initialization, but before your offset computations.

answered Oct 21 '15 at 10:53

punov

798
7
16

I would check that window.scrollY and window.scrollX exist before using them, otherwise you might get NaN result if safari mobile structure changes in the future. – omerkarj Jul 04 '16 at 07:34
That means they would break backwards compatibility. But if you want to do that anyway, you can replace `result.top -= window.scrollY;` with `result.top -= window.scrollY || 0;`, and `result.left -= window.scrollX;` with `result.left -= window.scrollX || 0`. – Yeti Feb 24 '17 at 12:43

Offset Top Not Working In IOS

2 Answers2