Mozilla Firefox 中的 CSS/JS 问题答案

【问题标题】：CSS/JS issue in Mozilla FirefoxMozilla Firefox 中的 CSS/JS 问题
【发布时间】：2014-11-06 03:20:30
【问题描述】：

我在 Firefox 中遇到了一个奇怪的问题。我已将一些 js 应用到此站点的标题 http://devignstudios.nl/ 上，因此当用户向下滚动页面时，标题始终是粘性的。粘性标头在除 Firefox 之外的所有浏览器中都能正常工作。我试图找到解决方案，但找不到正确的答案。

下面是js

var stickyNavTop = $('#header').offset().top;
            var stickyNav = function(){  
            var scrollTop = $(window).scrollTop();  

            if (scrollTop > stickyNavTop) {   
                $('#header').addClass('sticky');  
            } else {  
                $('#header').removeClass('sticky');   
            }  
            };  

            stickyNav();  

            $(window).scroll(function() {  
                stickyNav();  
            });

我们将不胜感激。

提前致谢！

【问题讨论】：

在 windows 7 上的 firefox 33.0.2 上运行良好。
它在 Android 浏览器上也不能完美运行
好吧，如果浏览器在一定数量的像素下，你删除粘性标题....
我现在有 32.0.3 更新到最新版本
@epascarello，你是什么意思？我不明白。

标签： javascript jquery css wordpress firefox

【解决方案1】：

这与 scrollTop 函数有关，当应用于 id 和 classes 时，该函数在 firefox 上并非在所有情况下都有效。试试这个：http://jsfiddle.net/rHmAA/7/

这是你的粘性 div 的修改版本。（备查）该脚本使用#stickyheader 作为包装器。

$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
    e.preventDefault();

    var target = this.hash,
        $target = $(target);

    var offset;
    if ($('#stickyheader').css('position') == 'relative') {
        offset = $('#stickyheader').outerHeight(true) * 2;
    } else {
        offset = $('#stickyheader').outerHeight(true);
    }
    console.log("offset: " + offset);
    var $parent = $target.offsetParent();
    console.log("$target.offset().top " + $target.offset().top);

    $('#wrapper').animate({
        'scrollTop': $target.offset().top - offset
    }, 1500, function(){
        window.location.hash = target;
    });

});

});

【讨论】：