Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Offset Top Not Working In IOS

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.

like image 481
Jeremi Liwanag Avatar asked Oct 12 '15 06:10

Jeremi Liwanag


People also ask

What is offset top?

Definition and Usage The offsetTop property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element.

How is offsetTop calculated?

offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent , the closest positioned ancestor element.

What is offsetTop in angular?

The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element. Syntax: object.offsetTop.


2 Answers

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'
            });
        }
    });
});
like image 102
Abhishek Saini Avatar answered Oct 20 '22 07:10

Abhishek Saini


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.

like image 45
punov Avatar answered Oct 20 '22 07:10

punov