淡入/淡出滚动菜单

我创建了一个小脚本，在向下滚动一点之后使菜单变得粘稠，但是因为我有反弹“bug”，所以我想让它淡入/淡出，所以它看起来更顺畅。问题是，我不使它工作..淡入/淡出滚动菜单

下面是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'); 
    } 
});

}） ;

我试着添加淡入/淡出，但它似乎没有工作..任何想法我做错了什么？谢谢！

来源

2016-01-13 T. Bones

淡出即使世界一个方便的工具，我使用在飞行中使用CSS过渡和动画。 https://daneden.github.io/animate.css/ – JayD

您可以通过向固定类添加CSS转换来完成此操作。

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

，并通过添加相同过渡到headnav类

headnav { 
    transition: opacity 0.5s; 
}

来源

2016-01-13 23:19:36

它似乎没有任何改变。谢谢 –

请看这里：https://jsfiddle.net/mark_c/asn6wk9x/ –

淡入/淡出滚动菜单

回答

相关问题