在sticky.js中添加fadeOut。

Question

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

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

如何在其他人粘住之前淡入前一个菜单。

就像发生在这个site上，屏幕大于1024px。

预先感谢您。

Answer 1

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

Answer 2

这将是，如果你更好地解释你到目前为止做了什么..

您可以使用CSS-opacity属性为您的子菜单，默认值为1 opacity: 1;

，在某些时候当您滚动，你会开始降低不透明度，直到0（它应该是当你的CSS属性一子菜单top + height ==下一子菜单top）..

入住此的jsfiddle：http://jsfiddle.net/KzGJr/2/