0

我在我目前正在开发的网站上添加了一个导航栏（功能区样式），并使用 jQuery Sticky Plugin 使其在用户滚动时固定在视口的顶部。

它在 Firefox 中完美运行，但 Chrome 会忽略条带两侧的 z-index。在过去的 7 个小时里，我一直在谷歌上搜索这个问题的解决方案。我尝试了一系列不同的建议，包括取消嵌套栏和手动为所有元素设置位置和 z-index 值，但无济于事。事实上，我最终还是从头开始，因为我试图修复它只会让事情变得更糟。

谁能告诉我在 Chrome 中滚动时我应该改变什么来修复功能区的两侧？

4

4 回答 4

0

为什么不调整 和 的边框宽度和底部位置.DropMenu:before来.DropMenu:after绕过 的不一致行为z-index？

.DropMenu:before {
    border-color: transparent;
    border-color: rgba(40,54,44,.99) rgba(40,54,44,.99) transparent transparent;
    left: -1px;
    bottom: -12px;
}

.DropMenu:before, .DropMenu:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 6px;
}

.DropMenu:after {
    border-color: transparent;
    border-color: rgba(40,54,44,.99) transparent transparent rgba(40,54,44,.99);
    right: 0;
    bottom: -12px;
}

PS。:before较低版本的:afterIE 不太可能支持伪类。

于 2013-03-29T06:38:19.437 回答
0

该页面上有一个错误，如下所示

      TypeError: Cannot read property 'msie' of undefined

而且因为您使用的是 Jquery 1.9.1，所以这个错误很明显。$.browser已从1.9中删除。您可以使用jQuery Migrate来拥有$.browser support.

错误在这个js 文件中。

于 2013-03-29T06:40:23.467 回答
0

我看到你在哪里犯了错误......请执行以下操作以使其在每个浏览器中都能完美运行：

1) 从身体上取下丝带 img。

2）创建一个新类：

.topbg{浮动：左；宽度：100%；高度：25px；z 指数：9999；背景： url(../images/border_top.png) 重复-x 顶部中心；位置：固定；}

3）把这个新类放在你的 HTML: 和你的内容中

希望这可以帮助.....

于 2013-03-29T06:41:36.387 回答
0 
$(document).ready(function(){
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.nav').css({"position":"fixed", "top":"0"});
            } else {
                $('.nav').css({"position":"absolute","top":"50px"});
            }
        });


    });

});
于 2013-03-29T07:15:35.817 回答