Question

我试图创建一个导航栏，当用户向下滚动页面时，导航栏变为半透明，然后如果用户鼠标悬停在导航栏上，它会重新出现，然后一旦他们将鼠标移离对象就会再次出现。我似乎无法解决如何：

当用户向下滚动页面时，让鼠标离开后导航栏才会消失 - 当他们将鼠标移开屏幕时，我不希望它在屏幕顶部时淡出，只有当他们在页面中更进一步。如果它们移动鼠标而不是直接移动到设定的不透明度，则慢慢淡出。

$(window).scroll(function() {
    if ($(window).scrollTop() > 75) {
        $('#navBar').css("opacity", 0.3);
    }
    else {
        $('#navBar').css("opacity", 1);
    }
});

    $(document).ready(function(){
        $('#navBar').live("mouseover", function () {
                $(this).css("opacity", 1);
                });

        $('#navBar').live("mouseleave", function () {
                $(this).css("opacity", 0.3);
                });

    })

Answer 1

$(window).scroll(function() {
    if ($(window).scrollTop() > 75) {
        $('#navBar').css("opacity", 0.3);
    }
    else {
        $('#navBar').css("opacity", 1);
    }
});

$(document).ready(function(){
    $('#navBar').live("mouseover", function () {
            $(this).css("opacity", 1);
            });

    $('#navBar').live("mouseleave", function () {
        if($(window).scrollTop() > 75) { // this here
            $(this).css("opacity", 0.3);
        }
    });

})

这有用吗？

您可以将其添加到CSS中，使其逐渐淡入/淡出：

#navBar {
  transition: opacity 2s;
}

这样，每次更改元素#navBar的不透明度时，不透明度变化都需要2秒。

如何让导航栏淡入淡出

1 个答案: