Question

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

它在Firefox中完美运行，但只要条形棒粘贴，Chrome就会忽略功能区两侧的z-index。我花了最近7个小时谷歌搜索解决方案。我已经尝试了一系列不同的建议，包括为所有元素手动取消嵌套条形和设置位置和z-index值，但无济于事。事实上，我最终从头开始，因为我只是在尝试修复它时做得更糟。

有人可以告诉我在Chrome中滚动时我应该更改哪些内容以修复功能区的边缘？

Answer 1

为什么不调整.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。较低版本的IE可能不支持伪类:before，:after。

Answer 2

该页面上有一个错误，就像这样

      TypeError: Cannot read property 'msie' of undefined

因为您使用的是Jquery 1.9.1，所以此错误很明显。 $.browser已removed from 1.9。您可以使用jQuery Migrate来$.browser support。

错误在此js file。

Answer 3

我看到你犯了错误的地方......请按照以下方式使其在每个浏览器中完美运行：

1）从身体上取下你的缎带。

2）创建一个新课程：

.topbg {浮动：左;宽度：100％;高度：25像素;的z-index：9999; background：url（../ images / border_top.png）repeat-x top center;位置是：固定;}

3）将这个新类放在HTML中：和你的内容

希望这会有所帮助.....

Answer 4

$(document).ready(function(){
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.nav').css({"position":"fixed", "top":"0"});
            } else {
                $('.nav').css({"position":"absolute","top":"50px"});
            }
        });


    });

});

粘性条在谷歌浏览器中忽略了z-index

4 个答案: