Question

我已经创建了一个小脚本，在您向下滚动一下后使菜单变得粘滞，但因为我已经获得了反弹＆＃34; bug＆＃34;我想让它淡入/淡出，所以它看起来更平滑。问题是我无法正常工作..

这是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;
}

淡入/淡出滚动菜单

1 个答案: