粘性/固定标头在 Firefox 和 Android 中不起作用

Sticky/fixed header doesn't work in Firefox and Android

本文关键字：Firefox Android 不起作用 粘性      更新时间：2023-09-26

我一直在研究一个标题，当用户滚动到一定数量的像素时固定。

它适用于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中）会随着不同的屏幕尺寸而改变高度。搜索表单（与#telunjuk-titlebar一起存储在whitebarandsearchbar中）也是如此。

我试图按照这个答案的建议将$(window).scrollTop()更改为$(document).scrollTop()。我也尝试了这篇文章中建议的修复程序。但它仍然不起作用。

有什么帮助吗？

#telunjuk-category既

没有padding的CSS值，也没有borderWidth的CSS值。所以$('#telunjuk-category').css('padding')的返回值是 – 无。虽然Chrome只是将一个空值解析为0，但Firefox显然返回NaN。这就是为什么它在当前版本中不起作用的原因。

作为一种解决方案，您最好放弃为jQuery的outerHeight()函数自定义添加所有CSS值。这个函数已经包括所有的填充和边框（如果你愿意，甚至可以包括边距）。

所以

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

成为 

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

whitebarandsearchbar也应该这样做。

注意：此解决方案在Firefox中确实有效，我无法在Android上进行测试，但是在Android上position:fixed;存在一些一般问题：http://caniuse.com/css-fixed

相关文章：