Sticky/fixed header не работает в Firefox и Android

Question

Я работаю над заголовком, который фиксируется, когда пользователь прокручивает до определенного количества пикселей.

Он работает на Chrome, но он вообще не работает в браузере Firefox и Android по умолчанию. Я подозреваю, что это имеет какое-то отношение к scrollTop, но я не уверен, что.

Вот мой демо и код:

http://jsfiddle.net/xaliber/Y5xeZ/1/

$(window).scroll(function() { 
    var top = $(window).scrollTop(); 
    var floatheader = $('#telunjuk-category').height() 
      + parseInt($('#telunjuk-category').css('padding')) 
      + parseInt($('#telunjuk-category').css('borderWidth')); // height of <header> 
    var whitebarandsearchbar = 68 + $('.ui-listview-filter.ui-bar-c').height() 
      + parseInt($('.ui-listview-filter.ui-bar-c').css('padding')) 
      + parseInt($('.ui-listview-filter.ui-bar-c').css('borderWidth')); 

    if (top > floatheader) // height of float header 
     $(function() { 
      $('#categorypage #telunjuk-titlebar').addClass('stick'); 
      $('#categorypage .ui-listview-filter.ui-bar-c ').addClass('stick'); 
      $('#categorypage').css("padding-top", whitebarandsearchbar); 
     }) 
    else { 
     $('#categorypage').removeAttr('style'); 
     $('#categorypage .ui-listview-filter.ui-bar-c').removeClass('stick'); 
     $('#categorypage #telunjuk-titlebar').removeClass('stick'); 
    } 
}); 

Он использует несколько переменных, так как <header> (который хранится в floatheader) изменяет высоту с различным размером экрана. Форма поиска (которая хранится в whitebarandsearchbar вместе с #telunjuk-titlebar).

Я попытался изменить $(window).scrollTop() на $(document).scrollTop() как предложено this answer. Я также попробовал исправить предложенное решение in this post. Но это все еще не работает.

Любая помощь?

Answer 1

#telunjuk-category не имеет ни значения CSS для padding, ни для borderWidth. Таким образом, возвращаемое значение $('#telunjuk-category').css('padding') - ничего. Хотя Chrome просто анализирует пустое значение на 0, Firefox, по-видимому, возвращает NaN. Вот почему он не работает в текущей версии.

В качестве решения вы можете быть лучше всего использовать свои собственные значения CSS для функции jQuery outerHeight(). Эта функция уже включает в себя все прокладки & границ (и даже поля, если вы хотите).

Так

var floatheader = $('#telunjuk-category').height() 
      + parseInt($('#telunjuk-category').css('padding')) 
      + parseInt($('#telunjuk-category').css('borderWidth')); 

становится

var floatheader = $('#telunjuk-category').outerHeight(); 

То же самое должно быть сделано для whitebarandsearchbar.

Примечание: Это решение работает в Firefox, я не могу проверить на Android, но есть некоторые общие проблемы с position:fixed; на Android: http://caniuse.com/css-fixed