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.
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.
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.
The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element. Syntax: object.offsetTop.
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'
});
}
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With