0

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

这在 Firefox 和 Chrome 中是一种享受，但在 Internet Explorer 中（在 9 中测试），当滚动到达某个点并且位置切换到固定时，所有 child<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>

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

编辑：我应该提一下，当位置是staticIE9 中正确显示的菜单项时。当我向下滑动菜单变为 时fixed，菜单项消失了！

另一个编辑：我第一次使用 jsfiddle.net 所以希望它可以工作http://jsfiddle.net/ecm5L/

4

2 回答 2

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;
}
于 2012-11-12T11:01:32.047 回答
0

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

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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*/
}
于 2014-09-18T23:24:39.637 回答