javascript - 淡入/淡出滚动菜单

Question

我创建了一个小脚本，让菜单在您向下滚动一点后变粘，但因为我遇到了弹跳“错误”，所以我想让它淡入/淡出，这样看起来更流畅。问题是我无法让它工作..

这是 HTML:

<headnav>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </nav>
</headnav>

CSS:

.fixedd {
    position:fixed;
    top:0;
}

headnav {
    background: #fff;
    width: 100%;
    line-height: 100%;
    position: absolute;
    top: 290px;
    left: 0;
    z-index: 99998;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-width: 1px;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

还有 jQuery:

jQuery(document).ready(function($){
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 290) {
        $('headnav').addClass('fixedd');
    } else {
        $('headnav').removeClass('fixedd');
    }
});

});

我试过添加淡入/淡出，但它似乎不起作用。知道我做错了什么吗？谢谢!

Answer 1

您可以通过向固定类添加 CSS 转换来实现此目的。

.fixedd {
    position: fixed;
    top: 0;
    opacity: 1;
    transition: opacity 0.5s;
}

并通过向 headnav 类添加相同的过渡来淡出

headnav {
    transition: opacity 0.5s;
}