javascript - 在sticky.js中添加fadeOut。

我有一个包含三个不同部分的一页网站。每个部分的顶部都有一个子菜单。

滚动时，当该部分触摸页面顶部时，我将使用“ sticky.js”将菜单粘贴在网站顶部。

如何在其他菜单不变之前淡入上一个菜单。

就像它在大于1024px的屏幕上的site上发生的一样。

先感谢您。

最佳答案

当元素更改为粘性模式时，sticky.js添加一个类名is-sticky。因此，您可以使用它来切换CSS属性。我写了一个示例，通过类名切换两个菜单。 http://jsfiddle.net/cwshp/

<div id="menu">
    <div id="static-menu">This is static menu.</div>
    <div id="sticky-menu">This is stick menu.</div>
</div>

的CSS

html, body{
    height: 110%;
}

#menu {
    position: relative;
    width: 100%;
}

#static-menu {
    background-color: green;
}

#sticky-menu {
    background-color: red;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.is-sticky #sticky-menu {
    opacity: 1;
}

关于javascript - 在sticky.js中添加fadeOut。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23423466/