悬停效果不起作用

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 );
    }
});

_{我使用Opacity 0.1代替0仅用于演示目的。}