Question

我正在尝试实现一个“粘性”导航菜单 - 一个菜单项，当导航栏在滚动时到达屏幕顶部时切换到固定位置。

这适用于Firefox和Chrome，但在Internet Explorer（9中测试）中，当滚动到达某个点并且位置切换为固定时，所有子<li>都会消失（但是包含它们的<ul>保持相同的大小。

我正在尝试使用jQuery（这是我的代码）：

<script type="text/javascript">
    $(function() {

        // grab the initial top offset of the navigation 
        var sticky_navigation_offset_top = $('#navigation').offset().top;

        // our function that decides weather the navigation bar should have "fixed" css position or not.
        var sticky_navigation = function(){
            var scroll_top = $(window).scrollTop(); // our current vertical position from the top

            // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
            if ((scroll_top + 40) > sticky_navigation_offset_top) { 
                $('#navigation').css({ 'position': 'fixed', 'top':40, 'left':0 });
            } else {
                $('#navigation').css({ 'position': 'static', 'margin-top': 0 }); 
            }
        };

        // run our function on load
        sticky_navigation();

        // and run it again every time you scroll
        $(window).scroll(function() {
             sticky_navigation();
        }); 
    });
</script>

不幸的是，我无法证明这一点，因为它是在我们需要登录的安全网站上实现的。希望我有道理。如有必要，我可以提供截图。

编辑：我应该提一下，当位置为static时，菜单项会在IE9中正确显示。当我蹲下来，菜单变为fixed时，菜单项就会消失！

另一个编辑：我的第一次去jsfiddle.net所以希望它有效http://jsfiddle.net/ecm5L/

Answer 1

嗨Gareth你的js代码没有问题，但是有css过滤器属性的问题只是替换它或尝试删除你的#navigation css类的过滤器代码：

这是你的：

#navigation {
    width:100%;
    height:48px;
    background: #27b4ec;
    background: -moz-linear-gradient(top, #37c6ff 0%, #27b4ec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37c6ff), color-stop(100%,#27b4ec)); 
    background: -webkit-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: -o-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: -ms-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: linear-gradient(to bottom, #37c6ff 0%,#27b4ec 100%); 

  //*****REMOVE THIS******>
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37c6ff', endColorstr='#27b4ec',GradientType=0 );
  //*****REMOVE THIS******>

    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow:0 0 10px rgba(0,0,0,0.5);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    margin-bottom:10px;
    min-width:1100px;
    z-index:10000;
 }

OR PASTE IT:

#navigation {
width:100%;
height:48px;
background: #27b4ec;
background: -moz-linear-gradient(top, #37c6ff 0%, #27b4ec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37c6ff), color-stop(100%,#27b4ec)); 
background: -webkit-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: -o-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: -ms-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: linear-gradient(to bottom, #37c6ff 0%,#27b4ec 100%); 
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
-o-box-shadow:0 0 10px rgba(0,0,0,0.5);
box-shadow:0 0 10px rgba(0,0,0,0.5);
margin-bottom:10px;
min-width:1100px;
z-index:10000;
}

Answer 2

我遇到了同样的问题，这似乎是一个错误，当网页内部有太多内容让您的计算机规格正确处理它时，鉴于浏览器正在中间执行呈现它，我能够通过将以下转换代码添加到固定位置元素（transform: translateZ(0);-webkit-transform: translateZ(0);）来修复它，该位置元素强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform：translate3d（0,0,0）;将使GPU转换为CSS转换的动作，使它们更平滑（更高的FPS）。

注意： translate3d（0,0,0）在您看到的内容方面没有任何效果。它在x，y和z轴上移动对象0px。它只是一种强制硬件加速的技术。

ul > li {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

当位置：'固定'时消失的孩子<li> </li>

2 个答案: