Question

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

它适用于Chrome，但它在Firefox和Android默认浏览器上根本不起作用。我怀疑它与scrollTop有关，但我不确定是什么。

这是我的演示和代码：

$(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中）。

我尝试按this answer的建议将$(window).scrollTop()更改为$(document).scrollTop()。我也尝试了修正建议in this post。但它仍然无法发挥作用。

任何帮助？

Answer 1

#telunjuk-category既没有padding的CSS值，也没有borderWidth的CSS值。所以$('#telunjuk-category').css('padding')的返回值是 - 什么都没有。虽然Chrome只会将空值解析为0，但Firefox显然会返回NaN。这就是为什么它不适用于当前版本。

作为一种解决方案，您可能最好放弃为jQuery的outerHeight()函数添加所有CSS值的自定义。此功能已包含所有填充和＆amp;边框（如果你愿意，甚至是边距）。

所以

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

Sticky / fixed标头在Firefox和Android中不起作用

1 个答案: