0

这真的让我发疯。

我通过滚动和悬停制作了导航淡出菜单。但它显示透明背景 png 文件和文本在 IE8 及更低版本中失真。

我找不到好的解决方案。：（ 请帮我！！！

这是我的脚本代码。

<script type="text/javascript" src="/web/upload/js/jquery-1.8.0.min.js">

$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
            $('#header').stop().animate({'opacity':'0'},300);
        else    
                $('#header').stop().animate({'opacity':'1'},300);
    });

    $('#header').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#header').stop().animate({'opacity':'1'},300);
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#header').stop().animate({'opacity':'0'},300);
            }
        }
    );
});

</script>
4

1 回答 1

0

我想过只是发表评论，但我觉得这需要一个“答案”。

查看您的代码，我可以看到您正在为每个滚动移动执行 $(window) 和 $('#header') 之类的代码。这是相当昂贵的，并且可能会影响 IE8 的性能。另外，这段代码

$('#header').stop().animate({'opacity': '0'}, 300);

当用户从顶部滚动时将一遍又一遍地执行，这可能不会是一个平滑的效果。我将从重新编码您的滚动功能开始，然后从那里开始。尝试这样的事情（未经测试..抱歉）：

(function(window) {
    // Store your objects in vars outside of the scroll function
    var $header = $('#header'),            
        $window = $(window),
        headerVisible = true,
        fadeHeight = parseInt($header.outerHeight() / 2);

    $window.scroll(function(){
        var scrollTop = $window.scrollTop();

        if (scrollTop > fadeHeight && headerVisible) {
            headerVisible = false;
            $header.stop().animate({'opacity': '0'}, 300);
        } else if (scrollTop < fadeHeight && !headerVisible) {
            headerVisible = true;
            $header.stop().animate({'opacity': '1'}, 300);
        }
    });

    // Add your hover code here...and reuse the variables for $window and $header

// Pass in the 'global' window so we get faster access to a local-scope version
})(window);
于 2013-06-19T09:28:28.053 回答