如何让导航栏淡入淡出

How to get navbar to fade in and out

本文关键字：淡入 淡出 导航      更新时间：2023-09-26

我试图使一个导航条，当用户向下滚动页面导航条变成半透明，然后如果用户鼠标悬停在导航条上，它重复，然后再次出去，一旦他们移动他们的鼠标离开对象。我似乎不知道如何:

让导航条只在用户向下滚动页面时在鼠标离开后褪色——我不希望它在用户将鼠标移开后在屏幕顶部时褪色，只有当他们在页面的更下方时才会褪色。让它慢慢淡出，当他们移动鼠标，而不是直接去设置不透明度。

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

$(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秒。

相关文章：