jquery - 悬停效果不起作用

Question

$(function () {
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop != 0)
            $('#header').hide();
        else    
            $('#header').show();
    });
    $('#header').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0) {
                $('#header').show();
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0) {
                $('#header').hide();
            }
        }
    );
});

取决于滚动，它运作良好。但是对于鼠标悬停，它在 IE7 中尤其不起作用。:(

这是错的吗？

Answer 1

一旦你隐藏了你的固定 HEADER，（假设你做对了：）你就fixed无法回忆起mouseenter那个元素，因为它不再堆叠在它的原始空间中。

你最好处理元素的不透明度。这是一个使用 jQuery 的示例.fadeTo()

http://jsbin.com/eviziq/3/edit

$(window).scroll(function(){
    $('#header').stop().fadeTo(300, $(window).scrollTop() > 0 ? 0.1 : 1 );
});

$('#header').on('mouseenter mouseleave', function( e ){
    if( $(window).scrollTop() > 0 ) {
        $('#header').stop().fadeTo(300, e.type=="mouseenter" ? 1 : 0.1 );
    }
});

_{我使用 Opacity0.1而0不仅仅是出于演示目的。}