1

我在一个网站上工作，我正在使用 jQuery 和 CSS 框架Zurb Foundation。这个框架实际上改变了页面上每个对象的每个 CSS 默认属性，所以如果这是一个 CSS 问题，很难得到。

我有这个代码：

function handleNavBarDot() {
    var $navbar = $('nav#nav-bar'),
        $win = $(window);

    // inserting the div#circle after the nav bar in the markup
    $navbar.after('<div id="circle"></div>');
    var $dot = $('div#circle');

    function attachDot() {
        // using + (and not -) because the margin is negative
        var topStart = parseDim($navbar.css('top')) + parseDim($navbar.css('margin-top'));
        var availHeight = $navbar.outerHeight();
        var pageScrolled = $win.scrollTop() / ($(document).height() - $win.height());

        $dot.css({
            'position': 'fixed',
            'right': (parseDim($navbar.css('right')) - Math.floor($dot.width() / 2)) + 'px',
            'top': (topStart + availHeight * pageScrolled) + 'px',
        });
    }

    attachDot();
    $win.resize(attachDot);
    $win.scroll(attachDot);
}

它将这个小点在导航栏附近的垂直线上上下移动。如您所见，垂直偏移量是根据向下滚动的页面量计算的；水平位置是根据导航栏的位置计算的，这也是jQuery在脚本的另一部分设置的（为了使其始终固定在页面内容的一侧 - 具有固定的宽度 - 而不是固定的到浏览器窗口）。

当我在 Chrome/Safari/Opera 中运行它时，一切正常，并且点始终位于正确的位置。不过，在 Firefox 中，只有当我第一次加载页面时，该点才应该出现在该位置。在单次调用$(window).scroll()或$(window).resize()点后向右移动，改变其rightCSS 属性。当我检查页面时，element.style right属性会在调整大小和滚动时发生变化，并且它的值是正确的，但计算出来right的却不同 - 向右移动了一点。

最后说明：在 Firebug 中，如果我禁用/重新启用

*, *:after, *:before { -moz-box-sizing: border-box }

点回到正确的位置。

这个问题的原因可能是什么？

（如果您想查看实际问题，请前往实际站点）

4

0 回答 0